Question

我正在尝试制作一个表示时间轴上事件的堆积柱形图。我需要均匀间隔的条形，左/右滚动它们各自的刻度。目前在滚动时，列保持不变并更新其数据以反映它们所代表的新时间跨度（我假设）。

例如：滚动一个＆＃34;步骤＆＃34;在右边，我注意到这些差异：

The column remains in place with updated data and the axis tick moves

该列保留在更新数据的位置，轴标记向左移动。滚动时，这会产生类似图形均衡器的效果。（见fiddle）

我需要的是让列表示图表生命周期中的相同数据，并使用其刻度标记向左/向右滚动。

我怀疑我误解了配置中的某些内容。任何帮助/方向都将非常感激。

（作为旁注：有没有简单的方法来将过去的样式/颜色数据（xAxis日期时间值＆lt;今天）与普通数据区别开来？）

chart: {
    alignTicks: false,
    backgroundColor: '#eeeeee',
    events: {
        load: function (e) {
            this.xAxis[0].setExtremes(1390943153305, 1400015153305);
        }
    },
    ignoreHiddenSeries: true,
    renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
    enabled: true,
    shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
    height: 40,
    xAxis: {
        gridLineWidth: 1
    },
    series: {type: 'column'}
},
plotOptions: {
    series: {
        showInLegend: true,
        stacking: 'normal',
        dataGrouping: {
            enabled: true,
            forced: true,
            units: [
                ['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
                ['second', [604800]],
                ['minute', [10080]],
                ['hour', [168]],
                ['day', [7]],
                ['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
                ['month', null],
                ['year', null]
            ]
        }
    }
},
xAxis: {ordinal: false},
series: data

Answer 1

如果您只需要每周分组，那么只需要一组，请参阅：http://jsfiddle.net/s6BmC/2/

我认为这可以解决你的问题，对吧？

        plotOptions: {
            series: {
                showInLegend: true,
                stacking: 'normal',
                dataGrouping: {
                    enabled: true,
                    forced: true,
                    units: [ [ 'week', [1] ]]
                }
            }
        },

关于其他问题： - 是的，你可以为每个点设置特定的颜色，但你需要自己确定应该设置什么颜色：

data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]

另一种解决方案是为列包装设置颜色。我为烛台做过类似的事情：http://jsfiddle.net/79WZM/（这个解决方案需要更多关于Highcharts的知识）。

Highstock Column Chart - 数据分组使数据独立于轴滚动

1 个答案: