时间戳

首页 > 解决方案 > Highchart多色线系列动态

c# - Highchart多色线系列动态

问题描述

我正在使用 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. 可能吗？任何帮助，将不胜感激。

标签： c#highcharts

解决方案

您可以创建一个函数来为基于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

推荐阅读