高图表气泡图 JSON 作为数据源

Question

我遇到了气泡图系列未绘制的问题 - 尽管根据HighCharts示例教程进行了绘制。浏览器控制台上也没有错误，这使我很难弄清楚。

以下是从 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),
        });
    }

Answer 1

我正在使用您的数据的这样的事情怎么样。你随心所欲地改变它。其高图表示例，上面在问题中提供了数据。

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>

希望有帮助。