javascript - Highcharts Xaxis 删除旧数据并左移
问题描述
我对任何类型的编程语言都很陌生,但我非常幸运地找到了开始我正在从事的项目所需的东西。我正在尝试使用 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>
手动编辑月份进出是我目前正在做的事情 - 类似于上面的示例,如果可以自动将其向左移动会很好。提前致谢!
解决方案
您可以使用带有月份名称的数组作为点名称。该数组应在每次获取数据后更改其顺序。
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
推荐阅读
- php - 按一对多关系中的平均值排序
- sql - SQL连接表和限制条件匹配结果
- jquery - 带有子标题的可折叠菜单
- ios - 如何正确获取图像数据?
- python - Rasa emojis 阻止命令运行
- django - Django:在 urls.py 中检测请求域
- perl - 如何让 Alien 使用现有的 tarball 而不是下载?
- javascript - 如何使用 Angular 8 为某些回调(传单库)提供事件处理程序
- sql - 当 IDENTITY_INSERT 设置为 OFF 时,无法在表“电影”中插入标识列的显式值
- angular - 带有 plesk 的身份服务器:找不到主题为“CN=SigningCertificate”的有效证书