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

我试着用铅笔画一张折线图。我的密码在这里

如何像这样为工具提示中的每个项目设置颜色

---

如果希望工具提示与图例颜色相同，则需要修改

pointColor

选项

找到我的；）

var randomScalingFactor=function（）{return Math.round（Math.random（）*100）}；
变量lineChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
fillColor:“rgba（255,0,0,0.0）”，/“rgba（220220,0.2）”，
strokeColor：“红色”/“rgba（2201）”，
点颜色：“红色”/“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
},
{
标签：“我的第二个数据集”，
fillColor:“rgba（0,0,255,0.0）”，/“rgba（151187205,0.2）”，
strokeColor:“蓝色”/“rgba（151187205,1）”，
点颜色：“蓝色”/“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
},
{
标签：“我的第三个数据集”，
fillColor:“rgba（0,255,0,0.0）”，/“rgba（100100205,0.2）”，
strokeColor:“绿色”/“rgba（151187205,1）”，
点颜色：“绿色”/“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
}
]
}
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（ctx）.Line（lineChartData{
legendTemplate:“
”，
贝塞尔曲线：错，
多工具模板：“-”，
});
var legend=myLine.generateLegend（）；
document.getElementById（“图例”）.innerHTML=图例；

它正在工作！文件没有提到这一点。我试着读核心代码。但是，我没有找到工具提示中的项目颜色设置为pointColor的位置。谢谢Bladepianist。

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;