好吧,今天我遇到了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,那么我想将柱形图的值转换为带有attach highcahrt演示链接的组系列的负图值。

伙计们,我一直在努力解决这一问题,确实需要帮助。因此,如果有人知道我如何使用chart.series [0] .setData或其他任何方法,那将是很好的。先谢谢了

嗨,我希望我的图像这样动态
javascript - 如何使用highchart将柱形图动态更改为镜像图-LMLPHP

在提出答案之后,我现在正在得到这样的答案:
javascript - 如何使用highchart将柱形图动态更改为镜像图-LMLPHP

码:

                                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......


让我知道

最佳答案

如果要动态将柱形图更改为镜像图,则必须执行此操作。

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]]
           } ]
    });
}


希望对您有帮助。

关于javascript - 如何使用highchart将柱形图动态更改为镜像图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31715913/

10-11 05:38