Highstock柱形图-数据分组使数据独立于轴滚动

问题描述

我试图制作一个堆积的柱状图，以表示时间轴上的事件.我需要等距排列的条，它们分别以其刻度线左右滚动.目前，在滚动时，这些列会保留在原处，其数据会更新以反映它们所代表的新时间跨度(我认为).

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).

例如:向右滚动一个步骤"时，我注意到这些区别:

For example: when scrolling one "step" to the right, I note these differences:

该列保留有更新数据的位置，并且轴刻度线向左移动.滚动时会产生类似图形均衡器"的效果. (请参见小提琴)

The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)

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

What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.

我怀疑我误解了配置中的某些内容.任何帮助/指导将不胜感激.

I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.

(请注意:是否有任何简单的方法可以对过去(xAxis日期时间值<今天的数据)样式/颜色与常规数据不同的样式/颜色?)

(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)

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

推荐答案

如果您只想每周分组，则只需要一组，请参见: http://jsfiddle.net/s6BmC/2/

If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/

我认为这可以解决您的问题，对吗?

I think that resolves your issue, right?

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

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

Regarding additional question:- yes you can set specific color for each point, but you need to determine on your own what color should be set:

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

另一种解决方案是为列包装设置颜色.我为烛台做了类似的操作: http://jsfiddle.net/79WZM/(此解决方案需要更多Highcharts知识).

Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).

这篇关于Highstock柱形图-数据分组使数据独立于轴滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！