javascript - 如何使用highchart将柱形图动态更改为镜像图

Question

好吧，今天我遇到了 highchart 问题，我正在尝试解决以下问题:1. 我正在调用 ajax，然后像这样更改柱形图系列数据:

if(data == 2) {

chart.series[0].setData([
['2009', 140],['2010', 200],['2011',   100],
['2009', -200],['2010',   -120],['2011', -240]]);
}

2。我想要的是使用两个组名“UK”、“AUS”将此信息显示为镜像图表方式，这样数据将像这样显示 UK - 2009、2010、2011 以及与 AUS 2009、2010、2011 相同(但具有负值)3.我想要的演示在这里http://www.highcharts.com/demo/column-negative

所以，简而言之，如果 ajax 从 php 页面带来数据 = 2，那么我想将柱形图值转换为带有组系列的负图表值，例如附加 highcahrt 演示链接。

伙计们，我一直在努力解决这个问题，真的需要帮助。因此，如果有人知道我如何使用 chart.series[0].setData 或任何其他方法，那就太好了。提前致谢

嗨，我希望我的图表动态地像这样

在建议答案后，我现在得到这样的答案:

代码:

                                function requestData() {
                                    chart = $('#column_chart').highcharts();

                                    $.ajax({
                                        type: "POST",
                                        url: "graph_advanced_file.php",
                                        data: {sliceName: ch},
                                        success: function(data) {
                                            //store local storage.....

                                            localStorage.setItem("current_item", ch);

                                            //alert(data);
                                            //Now, check whatever data is coming through serve accordingly......to load some data.....of that perticular....
                                            if(data == 1) {
                                                //Travel..so get series data....
                                                <?php
                                                    //$each_slice_series = array();
                                                    //$each_slice_series = getSliceInfo(1);
                                                    //$sliceId = 1;
                                                    //call and get the figure....
                                                ?>
                                                chart.series[0].setData([
                                                ['Mand',   200],
                                                ['Sand',   800],
                                                ['Land', 700]]);
                                            }
                                            if(data == 2) {
                                                //Garment....So get series data....
                                                var options = {
                                                  chart: {
                                                      type: 'column'
                                                  }, 
                                                  plotOptions: {
                                                      series: {
                                                          stacking: 'normal'
                                                      }
                                                  }
                                                };

                                               //Load new options to chart   
                                               chart.setOptions(options);
                                                chart.series[0].setData([
                                                  ['2009', 140],['2010', 200],['2011',   100],
                                                  ['2009', -200],['2010',   -120],['2011', -240]]);

                                               chart.series[0].name="Uk";

                                               chart.series[1].setData([
                                                      ['2009', 180],['2010', 100],['2011',   150],
                                                      ['2009', -250],['2010',   -130],['2011', -270]]);

                                               chart.addSeries({ 
                                                  name: "AUS", 
                                                  data: [ ['2009', 180],
                                                          ['2010', 100],
                                                          ['2011', 150], 
                                                          ['2009', -250],
                                                          ['2010', -130],
                                                          ['2011', -270]] 
                                               });

                                               chart.redraw();

                                                //chart.series[0].setData([
                                                //['2009', 140],['2010', 200],['2011',   100],['2012', 130],['2013', 190],['2014', 220],['2015', 230],
                                                //['2009', -200],['2010',   -120],['2011', -240],['2012', -220],['2013', -150],['2014', -100],['2015', -250],
                                                //]);

                                            }

现在，这个 requestData 被调用:

$('#column_chart').highcharts({
                                     chart: {
                                            type: 'column',
                                            events: {
                                                load: requestData
                                                //click: changeLables
                                            }
                                        },
                                        title: {
                                            text: 'Total Sale of each products'
                                        },
                                        subtitle: {
                                            text: '(Click on product name to display monthly details)'
                                        },
                                        credits: {
                                            enabled: false
                                        },
                                        xAxis: {
                                            type: 'category'
                                        },
                                        yAxis: {
                                            title: {
                                                text: 'Products Sale'
                                            }
                                        },

                                        legend: {
                                            enabled: false
                                        },
                                        series: [{
                                            name: 'Product Sale',
                                            colorByPoint: true,
                                            data: [{
                                                name: 'Mand',
                                                y: 200<?php //echo $each_slice_series[0];?>
                                            }, {
                                                name: 'Land',
                                                y: 800<?php //echo $each_slice_series[1];?>
                                            }, {
                                                name: 'Sand',
                                                y: 700<?php //echo $each_slice_series[2];?>
                                            }]
                                        }]
                                    });//End of chart......

告诉我

Answer 1

如果您想将柱形图动态更改为镜像图，您必须这样做。

if(data == 2) {

   //Create options      
   var options = {
      chart: {
          renderTo: 'container',
          type: 'bar'
      }
    };

   //Load new options to chart   
   chart.setOptions(options);

   //Load new series
   chart.series[0].setData([
      ['2009', 140],['2010', 200],['2011',   100],
      ['2009', -200],['2010',   -120],['2011', -240]]);
   }
}

编辑

如果您有两个数据并且还想按名称对系列进行分组，则必须这样做。

if(data == 2) {



$('#column_chart').highcharts({ 
   chart: { 
     type: 'column' 
   },   
   plotOptions: { 
     series: { 
       stacking: 'normal' 
     } 
   }, 
   series: [{ 
     name: 'UK', 
     data: [ 
           ['2009', 140],['2010', 200],['2011', 100], 
           ['2009', -200],['2010', -120],['2011', -240]] 
     }, { 
     name: 'AUS', 
     data: [['2009', 180], 
           ['2010', 100], 
           ['2011', 150], 
           ['2009', -250], 
           ['2010', -130], 
           ['2011', -270]] 
           } ] 
    });
}

希望对你有帮助。