我对如何将json数据加载到组合饼图/栏Highcharts中感到很困惑。请在下面找到代码。这是一个例子，绝不是完成的。我只需要更好地掌握json负载以及如何表达数据系列。提前谢谢。
请注意突出显示的js代码是正确的吗？该项目位于我的开发框中，json文件是本地文件。
对于初学者，我想从我的json文件中绘制状态和ID值。 js代码中的系列应如何显示？
即
name: 'id',
data: processed_json
- 开头代码示例html / js -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>xxxxxxxx Automation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Load jason data
// var processed_json = new Array();
//$.getJSON('json_output.json', function(data) {
// // Populate series
// for (i = 0; i < data.length; i++){
// processed_json.push([data[i].key, data[i].value]);
$('#container').highcharts({
title: {
text: 'xxxxxxxxxxxxxx'
},
xAxis: {
categories: ['Nightly Scheduled Smoke Test', 'New Release Test', 'Regression Test', ' Discovery Test']
},
labels: {
items: [{
html: 'xxxxxxxxx Validation',
style: {
left: '55px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Ad-Hoc',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create Order',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create-Express-Ready-Parameter',
data: [3, 5, 5, 8]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
}, {
type: 'pie',
name: 'xxxxxxx Passed',
data: [{
name: 'Ad-Hoc',
y: 13,
color: Highcharts.getOptions().colors[0] // Ad-Hoc's color
}, {
name: 'Create Order',
y: 23,
color: Highcharts.getOptions().colors[1] // Create Order's color
}, {
name: 'Create-Express-Ready-Parameter',
y: 19,
color: Highcharts.getOptions().colors[2] // Create-Express-Ready-Parameter's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<p><center>
The following XXXXXn Report illustrates current Pass validation by test category.
<p> * Green represents the number of passed scenarios
<p> * Black represents the number of scenarios that are in progress or dev/test.
<p> * Blue represents the number of failed scenarios.
</p>
</center>
</html>
-snippet of json -
[
{
"uri": "features/TC-0001-Bill-Of-Laiding-Shipping.feature",
"id": "check-pricing-for-bill-of-laiding",
"keyword": "Feature",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 3,
"tags": [
{
"name": "@Bill-Of-Laiding-Shipping",
"line": 1
}
],
"elements": [
{
"id": "check-pricing-for-bill-of-laiding;check-pricing-for-bill-of-laiding",
"keyword": "Scenario",
"name": "Check Pricing for Bill of Laiding",
"description": "",
"line": 5,
"type": "scenario",
"tags": [
{
"name": "@Bill-Of-Laiding-Shipping",
"line": 1
}
],
"steps": [
{
"keyword": "Given ",
"name": "TC-0006-Log into One Lisa",
"line": 7,
"match": {
"location": "features/step_definitions/my_steps.rb:779"
},
"result": {
"status": "passed",
"duration": 9024120000
}
},
{
"keyword": "Then ",
"name": "TC-0001-Bill-Of-Laiding Query onleLisa (Lisa_One) to access existing Bill Of laiding",
"line": 8,
"match": {
"location": "features/step_definitions/my_steps.rb:1194"
},
答案 0 :(得分：0)
我会尝试帮助您轻松理解您的代码。 你JSON，应该填写我创建的var'dataPie'。
我希望它会对你有所帮助。
$(document).ready(function() {
var dataPie = [
{
name: 'ONE PART OF PIE',
y: 10,
color: Highcharts.getOptions().colors[0]
}, {
name: 'ANOTHER PART OF PIE',
y: 15,
color: Highcharts.getOptions().colors[1]
}];
var pieObject = {
type: 'pie',
name: 'xxxxxxx Passed',
data: dataPie,
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
$('#container').highcharts({
title: {
text: 'xxxxxxxxxxxxxx'
},
xAxis: {
categories: ['Nightly Scheduled Smoke Test', 'New Release Test', 'Regression Test', ' Discovery Test']
},
labels: {
items: [{
html: 'xxxxxxxxx Validation',
style: {
left: '55px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'Ad-Hoc',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create Order',
data: [3, 5, 5, 8]
}, {
type: 'column',
name: 'Create-Express-Ready-Parameter',
data: [3, 5, 5, 8]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[2],
fillColor: 'white'
}
},
pieObject
]
});
})
答案 1 :(得分：0)
1）有Highcharts Documentation on custom data preprocessing涵盖从JSON加载数据。如果您要使用jQuery＆＃39; $.getJSON加载数据，那么在创建图表之前，您应该在图表的配置对象中包含数据（用于创建图表）。
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
2）系列应如Documentation中所述。最重要也是最需要的部分是数据阵列。要绘制图表，您需要将JSON数据解析为Highcharts可接受的格式 - API中的更多信息。
简而言之 - 数据必须是1的3：数值数组（1），数组数组（2），或具有命名属性的对象数组（3）。数据必须涵盖每个点的y值，并且可以包含其他信息。
我无法帮助您进行数据解析，因为我不知道所需的值在哪里，也不知道您希望在图表的数据中包含哪些数据，也不知道在哪里（意思是什么 - 点名称，附加工具提示值，系列名字，其他？）。如果您将提供更多信息，那么我可以使用更精确的示例/演示更新此答案。