在Highcharts类别中的每个列上样条线

时间:2019-02-23 00:49:16

标签: highcharts

如何在Highcharts的每个类别的列上绘制样条线?

比方说,我在x轴上有5个类别,每个类别都有4列。现在,我想要一个样条曲线穿过类别中的所有4列(每个类别在其对应的列上应该有一个单独的样条曲线)

类别和列是否可以动态更改?

1 个答案:

答案 0 :(得分:0)

对于column系列,您可以禁用grouping并将pointPlacement设置为数字值。然后,您可以为x系列设置spline数据值以使其适合列:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'category',
        startOnTick: true,
        min: 0
    },
    plotOptions: {
        series: {
            grouping: false,
            pointWidth: 20
        }
    },
    series: [{
        data: [1, 1, 1, 1, 1],
        pointPlacement: -0.3
    }, {
        data: [2, 2, 2, 2, 2],
        pointPlacement: -0.1
    }, {
        data: [3, 3, 3, 3, 3],
        pointPlacement: 0.1
    }, {
        data: [4, 4, 4, 4, 4],
        pointPlacement: 0.3
    }, {
        type: 'spline',
        pointRange: 11,
        data: [
            [-0.3, 1],
            [-0.1, 2],
            [0.1, 3],
            [0.3, 4]
        ]
    }, {
        type: 'spline',
        pointRange: 11,
        data: [
            [0.7, 1],
            [0.9, 2],
            [1.1, 3],
            [1.3, 4]
        ]
    }]
});

实时演示:http://jsfiddle.net/BlackLabel/bdsfty2o/

API参考:

https://api.highcharts.com/highcharts/series.column.grouping

https://api.highcharts.com/highcharts/series.column.pointWidth

https://api.highcharts.com/highcharts/series.column.pointPlacement