使用高图表从包含单个雨降数据的系列中创建响应性累积雨图
使用高图表从包含单个雨降数据的系列中创建响应性累积雨图
提问于 2020-04-11 10:15:54
想要创建一个高图表，显示图表中可见数据点的降雨数据和累积降雨量(即累积雨系列始终保持在0)，基本上如下所示：
我使用以下代码填充JSON文件中的静态系列，当打开第一个图表时执行该代码：
//Import data from the JSON file
function getChartdata()
{
$.ajax({
url: 'data/7days_highchart.json',
datatype: "json",
success: function(data)
{
chart1.series[0].setData(data.map(el => [el[0], el[3]]));
chart1.series[1].setData(data.map(el => [el[0], el[4]]));
chart1.series[2].setData(data.map(el => [el[0], el[6]]));
chart1.series[3].setData(data.map(el => [el[0], el[5]]));
chart2.series[0].setData(data.map(el => [el[0], el[7]]));
},
});
}我有一个小提琴手https://jsfiddle.net/ashenshugar/1k6je58o/，它有雨图的设置，但没有任何数据在雨总计系列。
如何将到每个时间点为止的降雨数据和输入到图表的第二个序列中，从而使雨总序列只将可见的降雨数据加在一起？
更新:我已经想出了如何创建一个系列，这是雨系列的运行总数。
//Import data from the JSON file
function getChartdata()
{
$.ajax({
url: 'data/7days_highchart.json',
datatype: "json",
success: function(data)
{
chart1.series[0].setData(data.map(el => [el[0], el[3]]));
chart1.series[1].setData(data.map(el => [el[0], el[4]]));
chart1.series[2].setData(data.map(el => [el[0], el[6]]));
chart1.series[3].setData(data.map(el => [el[0], el[5]]));
chart2.series[0].setData(data.map(el => [el[0], el[7]]));
chart2.series[1].setData(data.map(el => [el[0], Rain_Total += el[7]]));
},
});
}然而，这仍然不能自动使图表缩放时的总雨量为零。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-13 14:25:26
您需要在每个afterSetExtremes事件函数回调中计算“总雨”系列的数据，例如：
chart2 = Highcharts.chart('chart2_container', {
xAxis: {
type: 'datetime',
events: {
afterSetExtremes: function () {
var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;
this.chart.series[1].setData(
temp_data.map(el => [
el[0],
el[0] >= xMin ? Rain_Total += el[7] : 0
]),
false
);
Rain_Total = 0;
chart1.xAxis[0].setExtremes(xMin, xMax);
chart2.xAxis[0].setExtremes(xMin, xMax);
}
}
},
...
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61155151
复制相关文章
相似问题
腾讯云开发者
