javascript - 如何使用 ChartJS 为工具提示中的每个项目设置颜色

Question

我尝试用 ChartJS 绘制折线图.我的代码在这里 jsfiddle.net/mhgyqpq0/1/

我怎样才能像这样为工具提示中的每个项目设置颜色

Answer 1

如果你想拥有与图例颜色相同的工具提示，你需要修改pointColor选项。

找到我的 Fiddle ;).

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            label: "My First dataset",
            fillColor : "rgba(255, 0, 0, 0.0)",//"rgba(220,220,220,0.2)",
            strokeColor : "red",//"rgba(220,220,220,1)",
            pointColor : "red",//"rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Second dataset",
            fillColor : "rgba(0, 0, 255, 0.0)",//"rgba(151,187,205,0.2)",
            strokeColor : "blue",//"rgba(151,187,205,1)",
            pointColor : "blue",//"rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Third dataset",
            fillColor : "rgba(0, 255, 0, 0.0)",//"rgba(100,100,205,0.2)",
            strokeColor : "green",//"rgba(151,187,205,1)",
            pointColor : "green",//"rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ]
}

var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
    bezierCurve: false,
    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
});

var legend = myLine.generateLegend();
document.getElementById("legend").innerHTML = legend;