如何动态绘制HighChart X轴

5
我正在绘制一个Highchart,如下所示 -
options.series.push({ name: this.SubCity, data: this.Data });

数据是系列数据的数组。

我还有一个用于x轴类别的数组,如下所示-

 Categ['Jan-Mar', 'Apr-Jun', 'Jul-Sep', 'Oct-Dec']

我的图表绘制得很好,但是x轴的类别有问题,因为我不知道如何动态设置类别。

为了更清晰地说明,我添加了一些代码-

 var PriceTrend = JSON.parse(Data);
 var AvgRate = new Array();
 var Categories = new Array();

 $(PriceTrend).each(function (index)
        {
            MaxRate.push(this.Max);
            MinRate.push(this.Min);
            AvgRate.push((this.Max + this.Min) / 2);
            Categories.push(this.Quarter);
        });


        TrendData.push({ SeriesID: SeriesID, Data: AvgRate, Visible: true, SubCity: SubCity, Categ: Categories });

        DisplayTrend();


function DisplayTrend()
{
options.series = [];

$(TrendData).each(function (Index)
{
    if (this.Visible)
    {
        options.series.push({ name: this.SubCity, data: this.Data });
    }
});
chart = new Highcharts.Chart(options);

}


你尝试过使用setCategories吗?http://api.highcharts.com/highcharts#Axis.setCategories() - Sebastian Bochan
2个回答

8
您正在寻找 Axis.update() 方法。
Highcharts.charts[0].xAxis[0].update({categories:['some','new','categories']}, true);

这是一个例子

动态更新x轴


如果您需要动态更新x轴的最小值和最大值(例如在时间序列图上,您想要显示一段时间内的实时数据,例如1小时),则可以使用xAxis上的setExtremes方法 - https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes。示例 - Highcharts.charts [0] .xAxis [0] .setExtremes(newMin,newMax,true)。(true是'redraw',newMinnewMax必须是数字) - Chris Halcrow

1

只要几个月,您就可以做到。 http://api.highcharts.com/highcharts#Chart.addAxis() http://jsfiddle.net/wvaGt

chart.addAxis({ // Secondary yAxis
        id: 'rainfall-axis',
        title: {
            text: 'Rainfall'
        },
        lineWidth: 2,
        lineColor: '#08F',
        opposite: true
    });
    chart.addSeries({
        name: 'Rainfall',
        type: 'column',
        color: '#08F',
        yAxis: 'rainfall-axis',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    });

希望能对某些人有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接