javascript 如何在 Chart.js 中显示工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24525931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show tooltips in Chart.js?
提问by Blacksonic
Following the tutorial this code draws the line chart, but no tooltips. Am I missing some configuration option here? In the tutorial there are tooltips showing up.
按照教程，此代码绘制折线图，但没有工具提示。我在这里错过了一些配置选项吗？在教程中有工具提示出现。
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx = document.getElementById("chart").getContext("2d");
var myNewChart = new Chart(ctx).Line(chartData, {
showTooltip: true,
tooltipTemplate: "<%= value %>"
});
回答by cooncesean
What version of chart.js are you using?
您使用的是哪个版本的 chart.js？
I can confirm that tooltips work using v1.0.1-beta2
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>
but do not work using v0.2.0.
但不能使用 v0.2.0。
Version 1.0.1-beta2 is available from cdnjs.
版本 1.0.1-beta2 可从 cdnjs 获得。
回答by Manolis
It works and shows tooltips properly.. Do you get any error in the console?
它可以正常工作并正确显示工具提示..您在控制台中遇到任何错误吗？
Here's how I used your code:
这是我如何使用您的代码：
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
window.onload = function(){
var ctx = document.getElementById("chart").getContext("2d");
window.myNewChart = new Chart(ctx).Line(chartData, {
showTooltip: true,
tooltipTemplate: "<%= value %>"
});
};
回答by Assis Runny
You just need to put backgroundColor with a single value instead a array:
您只需要将 backgroundColor 与单个值而不是数组放置：
datasets: [{
label: "# of beauty womens",
data: [12, 5, 3],
backgroundColor: "#FC940B",
fill: false,
borderColor: "#FC940B"
}]
Hugs...
拥抱...
