如何从外部json获取highchart数据答案

【问题标题】：how to get highchart data from external json如何从外部json获取highchart数据
【发布时间】：2018-05-15 19:03:03
【问题描述】：

我有一个来自 highchart 插件的饼图，我需要从外部 json 获取数据，但是根据 json 结构，我很难获取图表，在“chart1”中，div chart1 数据应该在“chart2”中div chart2 数据应该来自 json 我在下面的代码中也给出了 html、javascript 和 json。在此先感谢

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

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

</head>
<body>
<div id="chart1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="chart2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JAVASCRIPT

$.getJSON('http://localhost/highcharts/json-data/chart.json', function (data) {

    // Make codes uppercase to match the map data
    $.each(data, function () {
       // this.code = this.code.toUpperCase();
    });
Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
       // pointFormat: ' <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
               format: '<b>{point.name}</b>',
            }
        }
    },
    series: [{
        name: 'Brands',
       // colorByPoint: true,
        data: data,
    }]
});
});

JSON(chart.json)

{
    "chart1": [{
            "name": "name1",
            "y": 6
        },
        {
            "name": "name2",
            "y": 12
        },
        {
            "name": "name3",
            "y ": 18
        },
        {
            "name ": "name3",
            "y ": 10
        }
    ],
    "chart2": [{
            "name ": "name1",
            "y ": 1981
        },
        {
            "name ": "name2",
            "y ": 6
        }
    ]
}

【问题讨论】：

谁能帮帮我

标签： highcharts

【解决方案1】：

你需要对传入的 json 数据做一些事情。我通过将数据放入变量中来模拟从 ajax 返回的数据。重要的部分是：

$.each(jsondata, function(chartDiv) {
  //create each chart here
  //chartDiv is the top level of the json structure
  //jsondata[chartDiv] gives you the data for each chart.
  ...
}

var jsondata = {
  "chart1": [{
      "name": "name1",
      "y": 6
    },
    {
      "name": "name2",
      "y": 12
    },
    {
      "name": "name3",
      "y": 18
    },
    {
      "name ": "name3",
      "y": 10
    }
  ],
  "chart2": [{
      "name ": "name1",
      "y": 1981
    },
    {
      "name ": "name2",
      "y": 6
    }
  ]
}

// Make codes uppercase to match the map data
$.each(jsondata, function(chartDiv) {
  Highcharts.chart({
    chart: {
      renderTo: chartDiv,
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Browser market shares in January, 2018'
    },
    tooltip: {
      // pointFormat: ' <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>',
        }
      }
    },
    series: [{
      name: 'Brands',
      // colorByPoint: true,
      data: jsondata[chartDiv],
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

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

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

还要注意你传入的 json 中有 errors，你有"y ": 18，参数名称中不应该有空格。最好不要用引号括起来。（我为示例更正了这一点。）

工作小提琴： https://jsfiddle.net/ewolden/pq6L219g/

【讨论】：

如果您对答案感到满意，请考虑接受它，以便其他人可以看到它有帮助。