gpt4 book ai didi

javascript - 从外部 JSON 创建饼图不起作用

转载 作者:行者123 更新时间:2023-12-01 03:26:26 26 4
gpt4 key购买 nike

我有以下代码来生成饼图。我正在调用外部 json 文件来生成饼图。因为某些原因。它不生成饼图。我错过了什么或做错了什么?

下面是我的代码:

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

JavaScript

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- high chart libarary -->

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

<script>


var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []

},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},

series: [{}]
}

setTimeout(function() {

$.getJSON("pie.json", function(json) {
// options.xAxis.categories = json[0]['data'];
// options.series[0] = json[1];
// options.series[1] = json[2];
// chart = new Highcharts.Chart(options);
// debugger
console.log(json);
alert(json);

options.series[0].data = json
chart = new Highcharts.Chart(options);
});





}, 0)


</script>

JSON-pie.json

 [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]

最佳答案

我们在这里。饼图 json 数据需要转换,如下所示:

  var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []

},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},

series: [{type:"pie"}]
}

setTimeout(function() {

$.getJSON("pie.json", function(json) {
console.log(json);
alert(json);

options.series[0].data = json;
chart = new Highcharts.Chart(options);
});





}, 0);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- high chart libarary -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

</body></html>
饼..json
[{
"name": "Microsoft Internet Explorer",
"y": 56.33
}, {
"name": "Chrome",
"y": 24.03,
"sliced": true,
"selected": true
}, {
"name":"Firefox",
"y": 10.38
}, {
"name":"Safari",
"y": 4.77
}, {
"name":"Opera",
"y": 0.91
}, {
"name": "Proprietary or Undetectable",
"y": 0.2
}]

关于javascript - 从外部 JSON 创建饼图不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44788935/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com