我对任何一种编程语言都是新手，但是很幸运，找到了我正在从事的项目的开始所需的东西。我正在尝试使用Highcharts从SQL数据库为最终用户可视地生成数据。我需要将xAxis标记长达一年（2018年1月-2019年1月，2018年2月-2019年2月，依此类推），以向左移动并在新的每月数据时每月从图表中“隐藏”或“裁剪”旧数据输入到SQL。
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan 2018',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
'Jan 2019'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 90]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3, 90]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2, 90]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1, 90]
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
所以现在我看起来像上面的一样，当添加2019年2月时，它应该从图表中移出2018年1月，并且第一组数据应该是2018年2月到2019年2月。
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Feb 2018',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
'Jan',
'February 2019'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 90]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3 , 90]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2, 90]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1, 90]
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
我目前正在手动编辑月份和月份-与上面的示例类似，如果可以自动将其左移，那将很好。预先感谢！
答案 0 :(得分：0)
您可以使用带有月份名称作为点名称的数组。每次获取数据后，数组应更改其顺序。
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan'],
year = 2018;
// Create the chart
Highcharts.chart('container', {
chart: {
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
xAxis = this.xAxis[0];
setInterval(function() {
months.splice(0, 1);
months.push(months[0]);
var name = months[months.length - 1];
if (months[months.length - 1] == 'Jan') {
year++;
name = months[months.length - 1] + " " + year;
}
var y = Math.round(Math.random() * 100);
series.addPoint({
y: y,
name: name
}, true, true, false);
}, 1000);
}
}
},
xAxis: {
uniqueNames: false,
type: "category"
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
i;
for (i = 0; i <= 12; i++) {
if (i == 0) {
name = months[i] + " " + year
} else if (i == 12) {
year++;
name = months[i] + " " + year
} else {
name = months[i]
}
data.push({
y: Math.round(Math.random() * 100),
name: name
});
}
return data;
}())
}]
});
API参考：
https://api.highcharts.com/highcharts/series.line.data.name
https://api.highcharts.com/highcharts/xAxis.uniqueNames
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint