HighCharts气泡图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> 

希望能有所帮助。