0
余米建立一个HTML并调用的XML文件,并创建抛出一个折线图,现在我的problum是如何创建多个图表是我的数据是否进入xml?
如何创建多个图表像我想创建这个数据的三个图表
馅饼
线
柱
行是在默认情况下显示,但我想馅饼和列字符我的数据进入xml文件
IM期运用这个api key
现在我搜索净这个解决方案,但林没有找到解决办法,我发现在this
但这里是数据是静态的JavaScript如何将这种
我的代码是这样的
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script>
// Code goes here
$(document).ready(function() {
/* *********************************************************** */
/* *********************************************************** */
var newOPtion4 = {
chart: {
renderTo: 'lineChart4',
type: 'line',
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 240, 255)'],
[1, 'rgb(240, 255, 240)']
]
},
borderWidth: 1,
plotBackgroundColor: 'rgba(255, 255, 255, .8)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
text: 'Salary Chart Last 8 Years',
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
categories: [],
tickmarkPlacement: 'on',
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
text: 'Month Salary',
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
credits: {
style: {
right: '10px'
}
},
labels: {
style: {
color: '#99b'
}
},
plotOptions: {
series: {
animation: {
duration: 3000
},
}
},
series: []
};
// Load the data from the XML file
$.get('data.xml', function(xml) {
// Split the lines
var $xml = $(xml);
// push categories
$xml.find('categories item').each(function(i, category) {
newOPtion4.xAxis.categories.push($(category).text());
});
// push series
$xml.find('series').each(function(i, series) {
var seriesOptions = {
name: $(series).find('name').text(),
data: []
};
// push data points
$(series).find('data point').each(function(i, point) {
seriesOptions.data.push(
parseInt($(point).text())
);
});
// add it to the options
newOPtion4.series.push(seriesOptions);
});
var chart = new Highcharts.Chart(newOPtion4);
});
/* *********************************************************** */
/* *********************************************************** */
});
</script>
</head>
<body>
<div id="lineChart4" style="width: 400px; height: 300px; margin:0 auto"></div>
</body>
</html>