向 Chart.js 折线图添加标题

Posted 2023-05-08

【中文标题】向 Chart.js 折线图添加标题

【英文标题】：Adding a Title to a Chart.js line graph

【发布时间】：2014-07-24 08:24:15

【问题描述】：

我正在尝试使用 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

图表数据标签和点是数组。

                   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);

这是使用 JSON 数据完成的，并且在通话后我有：

                $("canvas").each(function (i, item) 
                    var context = $(this).get(0).getContext("2d");
                    context.textBaseline = 'top';
                    context.fillText('Test', 0, 0);
                );

图表只是正常加载，没有任何文本。如果我使用 context.font 那么每个画布上的所有标签都会改变。我已经关闭了加载动画。有什么想法吗？

【参考方案1】：

我没有在画布上绘图，而是在元素周围添加了一个标签

<label for = "idOfCanvas">
Your Label<br />
    <canvas></canvas>
</label>

【讨论】：

是的，这就是我一直在做的事情。我真的很喜欢能够将图表转换为图像并保存它们。唯一的问题是我这样做时没有标签，除非我在画布上绘制。

@ToddSkelton 我不认为改变代码以使框架自动绘制标签是不可能的。

【参考方案2】：

在选项中添加这个参数

    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

【参考方案3】：

您需要在选项部分添加带有具体信息的标题，并确保显示设置为 true。像这样：

options: 
    title: 
        display: true,
        text: 'Name of Your Line Chart'
    

这里是 Chartjs documentation的链接

【讨论】：

当我在 2015 年问这个问题时，我不相信他们在文档中有可用的标题，但很高兴知道它现在就在那里。