Highcharts - 来自json的多个饼图 [英] Highcharts - Multiple pie charts from json
问题描述
Highcharts - 来自json的多个饼图
假设我有一台带有4个硬盘的服务器。如何显示4个饼图，每个硬盘一个？它适用于图表类型为堆叠列（代码如下）。
JSON生成此输出：
[{
name：Drive，
data：[C：，D：，E：，F：]}，{
name：Free，
data 673869,2267920,105627,307096]}，{
name：Used，
data：[94029,2264810,6373,104]
}]
和我的脚本代码（用于堆积列）：
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< title>使用Highcharts的MySQL数据堆积柱形图< / title>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
var options = {
colors：['＃50B432'，'＃ED561B']，
图：{
renderTo：'container'，
type：'column'，
marginRight：130，
marginBottom：25
}，
title：{
text：'Server'，
x：-20 // center
}，
字幕：{
text：''，
x：-20
} ，
xAxis：{
categories：[]
}，
yAxis：{
title：{
text：'Used / Free'
}，
plotLines：[{
value：0，
width：1，
color：'＃808080'
}]
}，
tooltip：{
formatter：function（）{
return'< ; b>'+ this.series.name +'< / b>< br />'+
this.x +''+ Highcharts.numberFormat（this.percentage，2）+'％' ;
}
}，
图例：{
layout：'vertical'，
align：'right'，
verticalAlign：'top'，
x：-10，
y：100，
borderWidth：0
}，
plotOptions：{
列：{
堆栈：'normal'，
dataLabels：{
enabled：true，
color：'＃000000'，
formatter：function（）{
return bytes（this.point.y，true ）;
$ b $ .getJSON（data2.php ，function（json）{
options.xAxis.categories = json [0] ['data'];
options.series [0] = json [1];
options.series [1] = json [2];
图表= new Highcharts.Chart（options）;
}）;
}）;
函数字节（字节，标签）{
if（bytes == 0）return'';
var s = ['MB'，'GB'，'TB'，'PB'];
var e = Math.floor（Math.log（bytes）/Math.log（1024））;
var value =（（bytes / Math.pow（1024，Math.floor（e）））。toFixed（2））;
e =（e <0）？ （-e）：e;
if（label）value + =''+ s [e];
返回值;
}
< / script>
< script src =http://code.highcharts.com/highcharts.js>< / script>
< script src =http://code.highcharts.com/modules/exporting.js>< / script>
< / head>
< body>
< div id =containerstyle =min-width：400px; height：400px; margin：0 auto>< / div>
< / body>
< / html>
感谢您的任何建议。
你可以迭代每个json项目并创建新的div（例如append）和init图表。
重要的是，数据中的所有值都应该是数字，而不是像您所拥有的字符串。
示例： }）;
$（function（）{
var json = [{
name：Drive，
data ：[C：，D：，E：，F：]
}，{
name：Free，
data：[
}，{
name：Used，
data：[94029,2264810,6373,104]
}] ;
var each = Highcharts.each，
$ charts = $（'＃charts'）;
each（json，function（item，i）{
$ charts.append（'< div id =container'+ i +'>< / div>'）;
var $ chart = $（'＃container'+ i）;
$ b $ chart.highcharts（{
图表：{
类型：'pie'
}，
系列：[{
name：item.name，
data：item.data
}]
}）;
}）;
Highcharts - Multiple pie charts from json
Let's say I have a server with 4 hard drives. How do I show 4 pie charts, one for each hard drive? It works if the chart type is stacked column (code below). JSON produces this output:
[{
"name":"Drive",
"data":["C:","D:","E:","F:"]},{
"name":"Free",
"data":[673869,2267920,105627,307096]},{
"name":"Used",
"data":[94029,2264810,6373,104]
}]
And my script code (for stacked column):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacked column chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
colors: ['#50B432', '#ED561B'],
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Server',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Used / Free'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +' '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: '#000000',
formatter: function() {
return bytes(this.point.y, true);
}
}
}
},
series: []
}
$.getJSON("data2.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
function bytes(bytes, label) {
if (bytes == 0) return '';
var s = ['MB', 'GB', 'TB', 'PB'];
var e = Math.floor(Math.log(bytes)/Math.log(1024));
var value = ((bytes/Math.pow(1024, Math.floor(e))).toFixed(2));
e = (e<0) ? (-e) : e;
if (label) value += ' ' + s[e];
return value;
}
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Thank you for any suggestions.
You can iterate on each json item and create new div (by for example append) and init chart.
What is important, all values in data should be numbers, not strings like you have.
Example:
$(function () { var json = [{ "name": "Drive", "data": ["C:", "D:", "E:", "F:"] }, { "name": "Free", "data": [673869, 2267920, 105627, 307096] }, { "name": "Used", "data": [94029, 2264810, 6373, 104] }]; var each = Highcharts.each, $charts = $('#charts'); each(json,function(item, i) { $charts.append('<div id="container' + i + '"></div>'); var $chart = $('#container' + i); $chart.highcharts({ chart:{ type:'pie' }, series:[{ name: item.name, data: item.data }] }); });});
这篇关于Highcharts - 来自json的多个饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
