Highchart 动态多色线系列

Question

我正在使用 highchart 制作折线图，我想尝试在上面制作不同的颜色。

让我向您展示我当前的代码：

我有 6 个数组：

var xAxes = ['2021-05-05','2021-05-06','2021-05-07','2021-05-08','2021-05-09']
var Min = [2,2,2,2,2]
var Max = [200,200,200,200,200]
var value = [100,134,156,133,26]
var judge = ['OK','NG','OK','OK','NG']
var boxNo = ['Box1','Box1','Box1','Box2','Box2']

这是我创建图表的代码：

$('#container5').highcharts({
            chart: {
                type: 'line',
                zoomType: 'x'
            },
            title: {
                text: 'Daily IC Log Data'
            },
            subtitle: {
                text: 'Running Date'
            },
            xAxis: {
                tickInterval: 150,
                categories: xAxes,
                type: 'datetime',
                labels: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                gridLineWidth: 0,
                minorGridLineWidth: 0
            },
            plotOptions: {
                series: {
                    turboThreshold: 1000000
                }
            },
            tooltip: {
                shared: true,
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y} us<br/>'
            },
            series: [
                {

                    name: 'Value',
                    data: value,
                    type: 'spline',
                    tooltip: {
                        valueDecimals: 2
                    }
                },
                {
                    name: 'Minimun Std',
                    data: Min,
                    color: 'red',
                    type: 'spline',
                    line: {
                        dashStyle: 'longdash'
                    },
                    tooltip: {
                        valueDecimals: 2
                    }
                },
                {
                    name: 'Maximum Std',
                    data: Max,
                    type: 'spline',
                    tooltip: {
                        valueDecimals: 2
                    }
                }              
            ]
        });

根据我上面的代码，我想根据 boxNo 在我的折线图上进行微分。根据 boxNo，图表上的线条颜色应该不同。可能吗？任何帮助将不胜感激。

Answer 1

您可以创建一个函数来为基于 boxNo 数组的系列生成区域。示例：

var colorsMap = {
    Box1: ['blue', 'red', 'black'],
    Box2: ['green', 'yellow', 'orange']
};

function getZonesForSeries(seriesIndex) {
    var currentZone;
    var zones = [];

    boxNo.forEach(function(bN, index) {
        if (bN !== currentZone) {
            currentZone = bN;

            if (zones.length) {
                zones[zones.length - 1].value = index;
            }

            zones.push({
                color: colorsMap[bN][seriesIndex]
            });
        }
    });

    return zones;
}

现场演示： http://jsfiddle.net/BlackLabel/t8hcab7d/

API参考：https://api.highcharts.com/highcharts/series.line.zones

Highchart 动态多色线系列

Highchart multiple-color line series dynamically

c#

highcharts