时间戳

首页 > 解决方案 > 如何更改 Canvasjs 多折线图中索引和工具提示的颜色？

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

问题描述

所以我正在研究我的项目，该项目需要数据并将其显示在图表上我是 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();
}

}```

标签： javascripthtmlcsschartscanvasjs

解决方案

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

这个：-

lineColor

至：-

color

如果您希望线条的颜色相同，请使用 Legend Marker 和 ToolTipcolor 代替lineColor.

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

推荐阅读