Chart.js折线图的0线型

0 line style of Chart.js line chart

本文关键字：线型折线图 js Chart 更新时间：2023-09-26

我有一个用chart.js编写的具有正值和负值的折线图。我试图在不影响其他图表元素的情况下，为平行于X轴的0线赋予颜色。

我的代码：

line_chart_options: {
    responsive: false,
    maintainAspectRatio: true,
    multiTooltipTemplate: "<%= datasetLabel %>: $<%= addThousandCommas(value) %>",
    legendTemplate : "<ul class='"<%=name.toLowerCase()%>-legend'"><% for (var i=0; i<datasets.length; i++){%><li><span style='"background-color:<%=datasets[i].strokeColor%>'">&nbsp;</span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
},

我试过了：

    scaleLineColor: "rgba(0,0,0,1)",

但这只是给轴着色，而不是0线。

如何将0行着色？

通过设置提供给图表的数据集中的填充颜色来处理线条颜色。最显著的是fillColor、strokeColor和pointColor。

这是一个示例折线图对象，它为图表中的2行/系列着色：

var obj=    {
                labels : ["January","February","March","April","May","June","July"],
                datasets : [
                    {
                        label: "My First dataset",
                        fillColor : "rgba(220,220,220,0.2)",
                        strokeColor : "rgba(220,220,220,1)",
                        pointColor : "rgba(220,220,220,1)",
                        pointStrokeColor : "#fff",
                        pointHighlightFill : "#fff",
                        pointHighlightStroke : "rgba(220,220,220,1)",
                        data : 1,2,3,4,5,6,7]
                    },
                    {
                        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 : [1,2,3,4,5,6,7]
                    }
                ]
            };