[英]Adding a Title to a Chart.js line graph
I'm trying to use fillText to draw on a chart.js canvas after it is rendered and it will not work.我正在尝试使用 fillText 在渲染后在 chart.js 画布上进行绘制,但它不起作用。 The best I can do is change the font of the chart.我能做的最好的事情就是更改图表的字体。 Here is my code.这是我的代码。
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.如果我使用 context.font,那么每个画布上的所有标签都会更改。 I have turned off loading animation.我已经关闭了加载动画。 Any ideas?有任何想法吗?
Instead of drawing on the canvas, I simply add a label around the element我没有在画布上绘图,而是在元素周围添加一个标签
<label for = "idOfCanvas">
Your Label<br />
<canvas></canvas>
</label>
在选项中添加这个参数
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
You'd need to add the title with specifics in your options section and ensure display is set to true.您需要在选项部分中添加带有详细信息的标题,并确保显示设置为 true。 Something like so:像这样:
options: {
title: {
display: true,
text: 'Name of Your Line Chart'
}
}
Here's a link to the Chartjs documentation这是 Chartjs文档的链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.