Question

我必须创建以下图表，我必须动态地将数据加载到其中。 Basic Area http://domoticx.com/wp-content/uploads/highcharts-area-basic-standaard.png

有谁可以帮助我了解如何做到这一点。以下是我能够到达的地方。：

     $.ajax({
         url: 'EthicsData',
            dataType: "json",
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            async: false,
            processData: false,
            cache: false,
            delay: 150,
            success: function (data) {
                var EthicReg = (data[0].regdet);
                var EthicComp = (data[0].compdet);
                var EthicsCompletions = new Array();
                var EthicsRegistration = new Array();
                for (var i in EthicReg) {
                    var serie = new Array(EthicReg[i].Value, EthicReg[i].year);
                    EthicsRegistration.push(serie);
                }
                for (var y in EthicComp) {
                    var series2 = new Array(EthicComp[y].value,                 
EthicComp[y].year);
                    EthicsCompletions.push(series2);
                }
                DrawEthicsAndCompl(EthicsCompletions, EthicsRegistration)
            },

            error: function (xhr) {
                alert('error');
            }
        });
    };
        function DrawEthicsAndCompl(EthicsCompletions, EthicsRegistration) {
     debugger;
     var chart = new Highcharts.Chart({

         chart: {
             //plotBackgroundColor: null,
             //plotBorderWidth: 1, //null,  
             //plotShadow: false,
             renderTo: 'container1',
             type: 'area'
         },
         title: {
                 text: 'US and USSR nuclear stockpiles'
     },
     subtitle: {
             text: 'something'
     },
     xAxis: {
         allowDecimals: false,
         labels: {
             formatter: function () {
                 return 10; // clean, unformatted number for year
             }
         }
     },
     yAxis: {
         title: {
             text: 'Nuclear weapon states'
         },
         labels: {
             formatter: function () {
                 return this.value;
             }
         }
     },
     tooltip: {
         pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
     },
     plotOptions: {
         area: {
             pointStart: 2010,
             marker: {
                 enabled: false,
                 symbol: 'circle',
                 radius: 2,
                 states: {
                     hover: {
                         enabled: true
                     }
                 }
             }
         }
     },
     series: [{
         name: 'Registration',
         data: [EthicsRegistration[0]]
     }, {
         name: 'Completions',
         data: [EthicsCompletions[0]]
     }]
     });
     }

以下是演示相同但静态数据的链接：（http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/area-basic/）

Answer 1

只需更改按数组中项目的顺序，即

相反

var serie = new Array(EthicReg[i].Value, EthicReg[i].year);
                EthicsRegistration.push(serie);

使用

var serie = new Array(EthicReg[i].year, EthicReg[i].Value);
                EthicsRegistration.push(serie);

此外，如果您获得年度价值，请不要使用 pointStart：2010 ，而是将其保留在您从上述回复中获得的数据上。

Answer 2

感谢@Nishith提供正确的方向。我修改了如下代码：

name: 'Registration',
     data:  [EthicsRegistration[0][1], EthicsRegistration[1][1], EthicsRegistration[2][1]]
 }, {
     name: 'Completions',
     data: [EthicsCompletions[0][1],EthicsCompletions[1][1],EthicsCompletions[2][1]]
 }]
 });

如何将动态数据绑定到highcharts基本区域图

2 个答案: