填充x轴(类别)Highcharts ajax

时间:2016-07-01 17:11:31

标签: json ajax highcharts categories

我需要有关如何动态绑定x轴的帮助。我编写了一个web服务,它将从存储过程中获取数据。

我坚持只显示SP的第一列和x轴。

     $.ajax({
               type: "POST",
               url: "/path/path.asmx/xpath",
               contentType: 'application/json; charset=utf-8',
               dataType: "json",
               success:  function(data) {
                   alert("X_axis function is being hit")
                   // Parse JSON data:
                   var jsonCategories = eval('(' + data + ')');
                   alert(jsonCategories);
                   // Pass parsed data to the chart:
                    $('#Div3').xAxis[0].setCategories(jsonCategories);
               } 
           })
     //  }; 


       $('#Div3').highcharts({
           chart: {
               type: 'areaspline',
               backgroundColor: {
                   linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                   stops: [
                      [0, '#2a2a2b'],
                      [1, '#3e3e40']
                   ]
               }
           },
           title: {
               text: 'Average Disc Space consumption',
               style: { fontSize: 10, color: '#E0E0E3' }

           },           
           legend: {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'top',
               x: 0,
               y: 0,
               floating: true,
               borderWidth: 1,
               backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#EEE'
           },
           legend: {
               enabled: true
           },
           xAxis: {
               categories: [],        
               labels: {
                   style: {
                       color: '#E0E0E3'
                   }
               },
               plotBands: [{ 
                   from: 4.5,
                   to: 6.5,
                   color: 'rgba(68, 170, 213, .2)'
               }]
           },
           yAxis: {
               title: {
                   text: 'Disc (GB)',
                   style: { fontSize: 10, color: '#E0E0E3' }

               },
               labels: {
                   style: {
                       color: '#E0E0E3'
                   }
               }
           },
           tooltip: {
               shared: true,
               valueSuffix: ' GB'
           },
           credits: {
               enabled: false
           },
           plotOptions: {
               areaspline: {
                   fillOpacity: 0.5
               }
           },
           series: [{
               name: 'DB size',
               data: [20, 10, 65, 3, 55, 62, 58]
           }, {
               name: 'Data size',
               data: [19, 34, 47, 31, 3, 54, 41]
           },
           {
               name: 'Log size',
               data: [11, 34, 49, 38, 38, 80, 10]
           },
           {
               name: 'Backup size',
               data: [1, 32, 47, 3, 39, 59, 4]
           }

           ]
       });

0 个答案:

没有答案