如何修改CanvasJS多折线图的图例索引、ToolTip及悬浮标记颜色

你仅为数据序列配置了lineColor属性，该属性仅控制折线本身的渲染颜色，图例标记、Tooltip对应色块、鼠标悬浮时的折线标记这三类元素的颜色默认读取数据序列的color属性，因此出现颜色不同步的问题。

给每个数据序列新增color属性，属性值为你设置的折线颜色即可，该属性会自动同步控制折线、图例标记、Tooltip色块、悬浮标记的颜色，无需再单独配置lineColor。同时你当前代码中每个数据序列重复声明了两次showInLegend，可以删除冗余声明。

修改后的完整代码如下：

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    backgroundColor: "transparent",
    labelFontColor: '#f5f6fa',
    title:{
        text: ""
    },
    axisX: {
        valueFormatString: "DD MMM,YY",
        lineColor: "#f5f6fa",
        fontFamily: "'Roboto', sans-serif",
        labelFontColor: "#f5f6fa",
    },
    axisY: {
        title: "Temperature (in °C)",
        suffix: " °C",
        lineColor: "#f5f6fa",
        fontFamily: "'Roboto', sans-serif",
        labelFontColor: "#f5f6fa",
    },
    legend:{
        cursor: "pointer",
        fontSize: 16,
        fontColor: "#f5f6fa",
        fontFamily: "'Roboto', sans-serif",
        itemclick: toggleDataSeries
    },
    toolTip:{
        shared: true
    },
    data: [{
        name: "Myrtle Beach",
        type: "line",
        markerSize: 0,
        color: "#2196f3", // 替换原lineColor，自动同步所有关联元素颜色
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        dataPoints: [
            { x: new Date(2017,6,24), y: 31 },
            { x: new Date(2017,6,25), y: 31 },
            { x: new Date(2017,6,26), y: 29 },
            { x: new Date(2017,6,27), y: 29 },
            { x: new Date(2017,6,28), y: 31 },
            { x: new Date(2017,6,29), y: 30 },
            { x: new Date(2017,6,30), y: 29 }
        ]
    },
    {
        name: "Martha Vineyard",
        type: "line",
        markerSize: 0,
        color: "#f44336", // 替换原lineColor
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        dataPoints: [
            { x: new Date(2017,6,24), y: 20 },
            { x: new Date(2017,6,25), y: 20 },
            { x: new Date(2017,6,26), y: 25 },
            { x: new Date(2017,6,27), y: 25 },
            { x: new Date(2017,6,28), y: 25 },
            { x: new Date(2017,6,29), y: 25 },
            { x: new Date(2017,6,30), y: 25 }
        ]
    },
    {
        name: "Nantucket",
        type: "line",
        markerSize: 0,
        color: "#ffca28", // 替换原lineColor
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        dataPoints: [
            { x: new Date(2017,6,24), y: 22 },
            { x: new Date(2017,6,25), y: 19 },
            { x: new Date(2017,6,26), y: 23 },
            { x: new Date(2017,6,27), y: 24 },
            { x: new Date(2017,6,28), y: 24 },
            { x: new Date(2017,6,29), y: 23 },
            { x: new Date(2017,6,30), y: 23 }
        ]
    }]
});
chart.render();

function toggleDataSeries(e){
    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
    }
    else{
        e.dataSeries.visible = true;
    }
    chart.render();
}

如果你需要折线颜色和其他元素颜色不一致，可以同时保留lineColor（单独控制折线颜色）和color（控制其他元素颜色）两个属性。如果需要单独设置悬浮标记的颜色，可给对应数据序列添加markerColor: "自定义颜色值"属性即可。

内容的提问来源于stack exchange，提问作者user14389228