Question

我正在研究 HighCharts 时间线图表。
我将数据分成不同的系列，因为我需要过滤图例功能。
这是我的时间线代码：Demo (Jsfiddle)
对于数据排序，我为每个点分配了“x”属性。但是目前每个点的宽度不一致，点重叠。
我希望我的图表看起来像 Expect Result(Jsfiddle)，带有过滤功能和数据排序，所以我使用整数索引值来表示“x”而不是毫秒。

这有可能解决吗？
非常感谢你。

目前正在使用代码：

Highcharts.chart('container', {
chart: {
    type: 'timeline'
},
xAxis: {
    visible: false
},
yAxis: {
    visible: false
},
legend: {
    enabled: true
},
plotOptions: {
    series: {
        pointPadding: 1,
        lineWidth: 0,
        legendType: '',
        showInLegend: true,
        colorByPoint: false,
        dataLabels: {
            allowOverlap: true,
            format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' + '{point.x}:{point.name}</span>'
        }
    }
},
series: [{
    name: 'Series A',
    data: [{
        x: 1,
        name: 'Data A-1',
        label: 'Label A-1',
        description: 'Some quite long description of the event.'
    }, {
        x: 5,
        name: 'Data A-2',
        label: 'Label A-2',
        description: 'Some quite long description of the event.'
    }, {
        x: 8,
        name: 'Data A-3',
        label: 'Label A-3',
        description: 'Some quite long description of the event.'
    }]
}, {
    name: 'Series B',
    data: [{
        x: 2,
        name: 'Data B-1',
        label: 'Label B-1',
        description: 'Some quite long description of the event.'
    }, {
        x: 4,
        name: 'Data -2',
        label: 'Label B-2',
        description: 'Some quite long description of the event.'
    }, {
        x: 7,
        name: 'Data B-3',
        label: 'Label B-3',
        description: 'Some quite long description of the event.'
    }]
}, {
    name: 'Series C',
    data: [{
        x: 0,
        name: 'Data C-1',
        label: 'Label C-1',
        description: 'Some quite long description of the event.'
    }, {
        x: 3,
        name: 'Data C-2',
        label: 'Label C-2',
        description: 'Some quite long description of the event.'
    }, {
        x: 6,
        name: 'Data C-3',
        label: 'Label C-3',
        description: 'Some quite long description of the event.'
    }]
}]

});

Answer 1

我认为您需要尝试另一种方法来实现它，因为时间线系列不支持多个系列。我的建议是：

为每个点创建一个带有 id 和定义颜色的数据数组，
添加带有空数据的虚拟系列 - 只是为了显示特定点的图例项，
使用 legendItemClick 事件回调查找分配给虚拟系列的点以隐藏/显示它们

演示：https://jsfiddle.net/BlackLabel/h0p57e9m/

API：https://api.highcharts.com/highcharts/series.timeline.events.legendItemClick

API：https://api.highcharts.com/class-reference/Highcharts.Point#update

Highcharts Timeline 在多个系列中不一致的点宽度

1 个答案: