我有一个来自highchart插件的饼图，我需要从外部json获取数据但是根据json结构，我很难得到图表，在＆＃39; chart1＆＃39; div chart1数据应该来到＆＃39; chart2＆＃39; div chart2数据应来自json 我已经在下面的代码中给出了html，javascript和json.Thanks提前
<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>
$.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,
}]
});
});
{
"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
}
]
}
答案 0 :(得分：0)
您需要对传入的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中包含错误，您有"y ": 18，参数名称中不应有空格。优选地，它不应该用引号括起来。 （我在这个例子中对此进行了更正。）