如何在特定索引处的柱形图中添加系列

时间:2016-09-29 13:50:10

标签: javascript highcharts

添加新系列时有没有办法设置位置列?

我在添加新系列后最后想要使用非功能代码的示例:

use strict;
use warnings 'all';
use feature 'say';

my @data = do {
    open my $fh, '<:encoding(cp37)', '/var/www/html/PERL/test' or die $!;
    local $/;
    my $data = <$fh>;
    unpack '@634 A9 A9 A3 A3 A3 A3', $data;
};

say for @data;

链接到我的jsFiddle:     https://developer.android.com/training/basics/data-storage/databases.html#DefineContract

在我的情况下,在创建图表时没有所有系列,因此我需要在加载其他数据集后重新排列它们。在这个例子中,我想在索引1处添加最后一个系列,并将现有列向右移动一个档位。

2 个答案:

答案 0 :(得分:1)

试试这个

series: [{
            name: 'Tokyo',
            data: [49.9, 71.5],
            index: 4
        }, {
            name: 'Berlin',
            data: [32.4, 33.2],
            index: 3
        }]
    });

    chart.addSeries( {
            name: 'New York',
            data: [83.6, 78.8],
            index: 2
        })
         chart.addSeries( {
            name: 'New York1',
            data: [83.6, 78.8],
            index: 1
        })

答案 1 :(得分:1)

我能找到的最佳解决方案是删除所有系列,对它们进行排序并再次添加。在这种情况下,它有用(maby必要)将数据保存在Highcharts对象之外。在我的例子中,一个名为series_data的数组。

$(function () {
var chart, series_data;
 series_data = [
    {
        name: 'Tokyo',
        data: [49.9, 71.5]
    }, {
        name: 'Berlin',
        data: [32.4, 33.2]
    }
];

chart = new Highcharts.Chart({
    chart: {
        type: 'column',
        renderTo: 'container'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: series_data
});

while(chart.series.length){
    chart.series[0].remove();
}

series_data.push( {
        name: 'New York',
        data: [83.6, 78.8]
    }
);

_.each(_.sortBy(series_data, 'data.0').reverse(), function(series, i){
  series.index = i;

  // To keep animations pretty and the last added to animate, do tno add it in the loop but later.
  if(series.name === 'New York'){
    return;
  }

    chart.addSeries(series, true, false);
})

chart.addSeries(series_data[2], true, false);

});

http://jsfiddle.net/cug79br2/23/

在删除项目后再次添加项目时,我会忽略“纽约”项目。系列并稍后添加它,但在其上设置索引,以便最新的系列将被动画。