HighCharts Bubble-Graph JSON als Datenquelle

Question

Ich stecke in einem Problem fest, bei dem die Bubble-Chart-Serie nicht plottet - obwohl ich es nach dem HighCharts-Beispiel-Tutorial gemacht habe. Es gibt auch keinen Fehler in der Browser-Konsole, was es mir sehr schwer macht, das herauszufinden.

Es folgt die empfangenen Daten von AJAX onSuccess Antwort:

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"}]" 

Unten ist voll Code, wo ich es HighCharts binded:

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), 

     }); 
    } 

Answer 1

Wie wäre es etwas wie das ich Ihr bin mit Daten. Du änderst es so, wie es dir gefällt. das Beispiel eines hohen Diagramms mit den oben in der Frage angegebenen Daten.

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>

Hoffnung, das hilft.