好的,我在Quickbase上使用Highcharts.JS将XML数据作为数据点加载,但我遇到了该系列的问题。每次我尝试添加一个新系列(例如co2)时,它都会将其标记为甲烷。我尝试过用甲烷推动,也分开了。
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=utf-8" >
< title > Basic Chart < /title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript
" src="
https: //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
< script type = "text/javascript"
src = "https://code.highcharts.com/highcharts.js" > < /script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript
">
$(document).ready(function() {
var sgaxml = 'https://EDITED.quickbase.com/db/EDITED?apptoken=EDITED&act=API_DoQuery&query=%7B14.EX.%27_FID_9%7D&clist=7.24.25.26.27.28.29.30.31.32.33.34.35.36.37'
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Components Over Time'
},
xAxis: {
categories: [
'Methane',
'CO2',
]
},
yAxis: {
title: {
text: 'Units'
}
},
series: []
};
// Load the data from the XML file
$.get(sgaxml, function(xml) {
// Split the lines
var $xml = $(xml);
// push methane series
$xml.find('record').each(function(i, record) {
var seriesMOptions = {
name: $(record).find('methane').text(),
data: [],
};
// push Methane data points
$(record).find('methane').each(function(i, point) {
seriesMOptions.data.push(
parseInt($(point).text())
);
});
// add it to the options
options.series.push(seriesMOptions);
});
// push co2 series
$xml.find('record').each(function(i, record) {
var seriesCOptions = {
name: $(record).find('co2').text(),
data: [],
};
// push CO2 data points
$(record).find('co2').each(function(i, point) {
seriesCOptions.data.push(
parseInt($(point).text())
);
});
// add it to the options
console.log(seriesCOptions);
options.series.push(seriesCOptions);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="
container " style="
width: 800px;
height: 400px;
margin: 0 auto "></div>
</body>
</html>
&#13;
任何人都知道为什么会这样做?它提供了正确的数据,但正在用错误的系列命名/分组......我已经查了几个接近这个问题的问题,并按照建议进行,但大部分时间都是在左边关闭据我所知/正在尝试做的事情。