如何更改 Canvasjs 多折线图中索引和工具提示的颜色？

Question

所以我正在处理我的项目，该项目获取数据并将其显示在图表上我是 JS 的新手，我从未使用过 Canvasjs。我想更改索引和工具提示的颜色，如下图所示，我可以更改线条颜色，但它不会更改索引和工具提示中的颜色，当我将鼠标悬停在一条线上时，它会显示标记上的先前颜色。我希望我说得容易理解。

我想改变什么

这是我的 .js 代码

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,
        lineColor: "#2196f3",
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        showInLegend: true,
        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,
        lineColor: "#f44336",
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        showInLegend: true,
        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,
        lineColor: "#ffca28",
        showInLegend: true,
        yValueFormatString: "#0.## °C",
        showInLegend: true,
        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();
}

}```

Answer 1

我不敢相信这个答案如此简单，只需替换

这个：-

lineColor

至：-

color

如果您想要线条、图例标记和工具提示中的颜色相同，请使用 color 而不是 lineColor.

因为lineColor只会改变图表中线条的颜色。

如何更改 Canvasjs 多折线图中索引和工具提示的颜色？

How can I change the colour of index and ToolTip in Canvasjs multi line chart?

javascript

html

css

charts

canvasjs