javascript 向 Chart.js 折线图添加标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24024676/
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
Adding a Title to a Chart.js line graph
提问by Todd Skelton
I'm trying to use fillText to draw on a chart.js canvas after it is rendered and it will not work. The best I can do is change the font of the chart. Here is my code.
我正在尝试使用 fillText 在渲染后在 chart.js 画布上进行绘制，但它不起作用。我能做的最好的事情就是更改图表的字体。这是我的代码。
var options = {
//Boolean - If we show the scale above the chart data
scaleOverlay: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: null,
//Number - The value jump in the hard coded scale
scaleStepWidth: null,
//Number - The scale starting value
scaleStartValue: null,
//String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth: 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels: true,
//Interpolated JS string - can access value
scaleLabel: "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily: "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize: 12,
//String - Scale label font weight style
scaleFontStyle: "normal",
//String - Scale label font colour
scaleFontColor: "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether the line is curved between points
bezierCurve: true,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill: true,
//Boolean - Whether to animate the chart
animation: false,
//Number - Number of animation steps
animationSteps: 60,
//String - Animation easing effect
animationEasing: "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete: null
}
Chart Data labels and points are arrays.
图表数据标签和点是数组。
var chartData = {
labels: labels,
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: points
}
]
}
var ctx = $("#" + item.logon).get(0).getContext("2d");
var chart = new Chart(ctx).Line(chartData, options);
This is done with JSON data and after the call I have:
这是使用 JSON 数据完成的，在调用之后我有：
$("canvas").each(function (i, item) {
var context = $(this).get(0).getContext("2d");
context.textBaseline = 'top';
context.fillText('Test', 0, 0);
});
The graphs just load normally without any text. If I use the context.font then all of the labels on each canvas is changed. I have turned off loading animation. Any ideas?
图表只是正常加载，没有任何文本。如果我使用 context.font，那么每个画布上的所有标签都会更改。我已经关闭了加载动画。有任何想法吗？
采纳答案by 9Deuce
Instead of drawing on the canvas, I simply add a label around the element
我没有在画布上绘图，而是在元素周围添加一个标签
<label for = "idOfCanvas">
Your Label<br />
<canvas></canvas>
</label>
回答by Ali
In the option add this parameter
在选项中添加这个参数
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
