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>