HighCharts Bubble graph JSON как источник данных

Я застрял в проблеме, когда серия пузырьковых диаграмм не замышляет - несмотря на то, что она выполняется в соответствии с учебным пособием HighCharts. В консоли браузера нет ошибки, поэтому мне действительно сложно понять.HighCharts Bubble graph JSON как источник данных

Ниже данные, полученные от AJAX OnSuccess ответа:

d:"[{"id":"3","name":"Australia","x":"24.1","y":"19.9","z":"3.5"},{"id":"1","name":"England (STA)","x":"23.8","y":"20.5","z":"2.6"},{"id":"5","name":"Germany","x":"22.8","y":"20.9","z":"2.3"},{"id":"2","name":"Spain","x":"17.8","y":"22.2","z":"1.4"}]"

Ниже полный код, где я переплетен его Highcharts:

function ShowMaturityGraph() { 
     var params = {}; 
     params.countryIDList = "1,2,3,5"; 
     params.xAxis = "1"; 
     params.yAxis = "2"; 
     params.bubbleSize = "6"; 

     $.ajax({ 
      type: "POST", 
      url: "default.aspx/GetMaturityValues", 
      data: JSON.stringify(params), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (response) { 
       visitorData(response.d); 
      }, 
      failure: function (response) { 
       alert(response.d); 
      } 
     }); 
    } 
    function visitorData(data) { 
     alert(data); 
     Highcharts.chart('container', { 

      chart: { 
       type: 'bubble', 
       plotBorderWidth: 1, 
       zoomType: 'xy' 
      }, 

      legend: { 
       enabled: false 
      }, 

      title: { 
       text: 'Maturity Values' 
      }, 

      subtitle: { 
       text: '' 
      }, 

      xAxis: { 
       gridLineWidth: 1, 
       title: { 
        text: '' 
       }, 
       labels: { 
        format: '' 
       }, 
       plotLines: [{ 
        color: 'black', 
        dashStyle: 'dot', 
        width: 2, 
        value: 65, 
        label: { 
         rotation: 0, 
         y: 15, 
         style: { 
          fontStyle: 'italic' 
         }, 
         text: '' 
        }, 
        zIndex: 3 
       }] 
      }, 

      yAxis: { 
       startOnTick: false, 
       endOnTick: false, 
       title: { 
        text: '' 
       }, 
       labels: { 
        format: '' 
       }, 
       maxPadding: 0.2, 
       plotLines: [{ 
        color: 'black', 
        dashStyle: 'dot', 
        width: 2, 
        value: 50, 
        label: { 
         align: 'right', 
         style: { 
          fontStyle: 'italic' 
         }, 
         text: '', 
         x: -10 
        }, 
        zIndex: 3 
       }] 
      }, 


      plotOptions: { 
       series: { 
        dataLabels: { 
         enabled: true, 
         //format: '{point.name}' 
        } 
       } 
      }, 

      series: $.parseJSON(data), 

     }); 
    }

источник

2017-02-03 Rohit

, какой пример с высоким качеством вы используете для этого? – MMK

http://www.highcharts.com/demo/bubble Вместо жестко заданных серий назначается объект. – Rohit

hight chart ожидает данные в числах, значениях float и т. Д., В вашей строке. – MMK

Как о чем-то вроде этого я использую ваш данные. Вы меняете его, как вам угодно. его пример с высоким графиком с данными, приведенными выше в вопросе.

Highcharts.chart('container', { 
 

 
    chart: { 
 
    type: 'bubble', 
 
    plotBorderWidth: 1, 
 
    zoomType: 'xy' 
 
    }, 
 

 
    legend: { 
 
    enabled: false 
 
    }, 
 

 
    title: { 
 
    text: 'Sugar and fat intake per country' 
 
    }, 
 

 
    subtitle: { 
 
    text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>' 
 
    }, 
 

 
    xAxis: { 
 
    gridLineWidth: 1, 
 
    title: { 
 
     text: 'Daily fat intake' 
 
    }, 
 
    labels: { 
 
     format: '{value} gr' 
 
    }, 
 
    plotLines: [{ 
 
     color: 'black', 
 
     dashStyle: 'dot', 
 
     width: 2, 
 
     value: 65, 
 
     label: { 
 
     rotation: 0, 
 
     y: 15, 
 
     style: { 
 
      fontStyle: 'italic' 
 
     }, 
 
     text: 'Safe fat intake 65g/day' 
 
     }, 
 
     zIndex: 3 
 
    }] 
 
    }, 
 

 
    yAxis: { 
 
    startOnTick: false, 
 
    endOnTick: false, 
 
    title: { 
 
     text: 'Daily sugar intake' 
 
    }, 
 
    labels: { 
 
     format: '{value} gr' 
 
    }, 
 
    maxPadding: 0.2, 
 
    plotLines: [{ 
 
     color: 'black', 
 
     dashStyle: 'dot', 
 
     width: 2, 
 
     value: 50, 
 
     label: { 
 
     align: 'right', 
 
     style: { 
 
      fontStyle: 'italic' 
 
     }, 
 
     text: 'Safe sugar intake 50g/day', 
 
     x: -10 
 
     }, 
 
     zIndex: 3 
 
    }] 
 
    }, 
 

 
    tooltip: { 
 
    useHTML: true, 
 
    headerFormat: '<table>', 
 
    pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' + 
 
     '<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' + 
 
     '<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' + 
 
     '<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>', 
 
    footerFormat: '</table>', 
 
    followPointer: true 
 
    }, 
 

 
    plotOptions: { 
 
    series: { 
 
     dataLabels: { 
 
     enabled: true, 
 
     format: '{point.name}' 
 
     } 
 
    } 
 
    }, 
 

 
    series: [{ 
 
    data: [{ 
 
     "id": "3", 
 
     "name": "Australia", 
 
     "x": 24.1, 
 
     "y": 19.9, 
 
     "z": 3.5 
 
    }, { 
 
     "id": "1", 
 
     "name": "England (STA)", 
 
     "x": 23.8, 
 
     "y": 20.5, 
 
     "z": 2.6 
 
    }, { 
 
     "id": "5", 
 
     "name": "Germany", 
 
     "x": 22.8, 
 
     "y": 20.9, 
 
     "z": 2.3 
 
    }, { 
 
     "id": "2", 
 
     "name": "Spain", 
 
     "x": 17.8, 
 
     "y": 22.2, 
 
     "z": 1.4 
 
    }] 
 
    }] 
 

 
});

<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

надежда, что помогает.

источник

2017-02-03 11:20:14 MMK

HighCharts Bubble graph JSON как источник данных

ответ

Смежные вопросы