javascript - Highstock 柱形图 - 数据分组导致数据独立于轴滚动

Question

我正在尝试制作一个堆叠柱形图来表示时间轴上的事件。我需要间隔均匀的条形图，它们会随着各自的刻度向左/向右滚动。目前在滚动时，列保持不变，并且它们的数据被更新以反射(reflect)它们代表的新时间跨度(我假设)。

例如:向右滚动一个“步”时，我注意到这些差异:

该列保留在原位并更新数据，轴刻度向左移动。这会在滚动时产生类似“图形均衡器”的效果。 (参见 fiddle)

我需要的是让该列在图表的生命周期内代表相同的数据，并使用其刻度线向左/向右滚动。

我怀疑我误解了配置中的某些内容。非常感谢任何帮助/指导。

(附带说明:是否有任何简单的方法可以使过去的数据(xAxis 日期时间值为 < 今天)的样式/颜色与普通数据不同？)

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 知识)。