根据图表上的每个系列的缩放级别动态地向高图添加平均值
Add average to highchart dynamically by zoom level for every series on chart
我正在寻找一种可能性,以添加一个水平平均线,以线为基础的高图图表。它应该只计算实际可见点的平均值(在缩放级别变化时重新绘制)和每个系列的平均值。
我只发现了一个计算所有序列平均值的例子
下面是一个基于缩放级别(受@jlbriggs解决方案的影响)计算每个系列的平均线的示例。它甚至继承了序列图中平均线的颜色。
/**
* Draws the average line for every series on chart
* @param chart
*/
function drawAverage(chart) {
// get the axis extremes to use as the x values
// for the average series
var ext = chart.xAxis[0].getExtremes();
var min = ext.min;
var max = ext.max;
// loop through visible series data and build total/count
// to calculate average from
$.each(chart.series, function (i, series) {
// id of the average line
var avgId = 'average_' + series.index;
var total = 0;
var count = 0;
// index of the corresponding yAxis for correct mapping of average line
var yAxisIndex = chart.yAxis.indexOf(series.yAxis);
// remove the average line before drawing new one
chart.yAxis[yAxisIndex].removePlotLine(avgId);
// only draw the line if series is visible
if (series.visible === true) {
// calculate average based on visible data points
$.each(series.data, function (i, point) {
if (point && point.x >= min && point.x < max) {
total += point.y;
count++;
}
});
var average = (total / count);
// console.log(series.name + ' with index ' + series.index + ' on yAxis ' + yAxisIndex + ': ' + average + ' = ' + total + '/' + count);
// add the average series
chart.yAxis[yAxisIndex].addPlotLine({
id: avgId,
color: series.color,
dashStyle: 'shortdash',
width: 1,
value: average,
label: {
text: 'Ø ' + Math.round(average * 10) / 10,
align: 'left',
x: -30,
style: {
color: series.color,
}
}
});
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width:600px;height:400px;"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Sleep'
},
xAxis: {
crosshair: true,
type: 'datetime',
events: {
afterSetExtremes: function () {
drawAverage(this.chart);
},
},
},
yAxis: [
{
title: {
text: 'Sleep duration [h]'
},
},
{
title: {
text: 'Sleep quality [%]',
style: {
color: '#008000'
},
},
opposite: true,
},
],
tooltip: {
shared: true
},
plotOptions: {
series: {
events: {
show: function () {
drawAverage(this.chart);
},
hide: function () {
drawAverage(this.chart);
},
},
},
},
series: [
{
name: 'Sleep duration',
data: [
[1473372000000,7.74],
[1473458400000,9.22],
[1473544800000,8.09],
[1473631200000,8.49],
[1473717600000,8.02],
[1473804000000,7.99],
[1473890400000,7.71],
[1473976800000,7.95],
[1474063200000,8.81],
[1474149600000,9.26],
[1474236000000,7.69],
[1474322400000,7.37],
[1474408800000,8.37],
[1474495200000,8.13],
[1474581600000,8.18],
[1474668000000,7.55],
[1474754400000,7.79],
[1474840800000,8.29],
[1474927200000,7.82],
[1475013600000,8.24],
[1475100000000,7.68],
[1475186400000,7.9],
[1475272800000,8.26],
[1475359200000,7.62],
[1475445600000,8.69],
[1475532000000,8.47],
[1475618400000,8.43],
[1475704800000,7.63],
[1475791200000,8.28],
[1475877600000,7.75]
],
color: '#696969',
tooltip: {
valueSuffix: ' h'
},
},
{
name: 'Sleep quality',
data: [
[1473372000000,95],
[1473458400000,100],
[1473544800000,86],
[1473631200000,94],
[1473717600000,100],
[1473804000000,89],
[1473890400000,85],
[1473976800000,96],
[1474063200000,100],
[1474149600000,100],
[1474236000000,95],
[1474322400000,90],
[1474408800000,93],
[1474495200000,88],
[1474581600000,93],
[1474668000000,82],
[1474754400000,90],
[1474840800000,87],
[1474927200000,87],
[1475013600000,94],
[1475100000000,90],
[1475186400000,84],
[1475272800000,97],
[1475359200000,79],
[1475445600000,100],
[1475532000000,94],
[1475618400000,92],
[1475704800000,92],
[1475791200000,100],
[1475877600000,88]
],
color: '#008000',
yAxis: 1,
tooltip: {
valueSuffix: ' %'
},
},
],
});
// draw average line on first load
chart = $('#container').highcharts();
drawAverage(chart);
});
</script>
我用plotLines
做了一行,但你可以很容易地将其更改为自己的系列:
// removing average series if there's one
var averageSeries = chart.get(avgId);
if(averageSeries != null) {
averageSeries.remove();
}
// only draw the line if series is visible
if (series.visible === true) {
// ...
// add the average series
chart.addSeries({
id: avgId,
name: 'Average ' + series.name,
showInLegend: true,
type: 'line',
lineWidth: 1,
lineColor: series.color,
color: series.color,
dashStyle: 'shortdash',
zIndex: 5 + series.index,
data: [
[min, average],
[max, average]
]
});
}
相关文章:
- 如何动态操作jquery可拖动UL元素的内容
- 无法拖动动态添加的 DIV
- 通过拖动移动动态创建的 DIV
- 动态 JS 拖动绑定函数限制在线拖动
- 网格员动态添加的小部件使可拖动
- 如何使动态创建的元素可拖动()
- jQuery动态拖动
- 具有可拖动列的动态淘汰Javascript表danvk
- 动态添加的 DIV,具有拖动和调整大小功能
- 拖动后在jquery中动态更改比例的变换原点
- 创建可拖动的动态
- Jquery dragtable动态添加的列拖动选项不工作
- 使动态绘制的元素可拖动
- 在动态JS中加载多个图像时可拖动的问题
- 动态添加的可拖动对象第一次不工作
- 动态JS拖动一个图层会导致另一个图层上的形状对拖动停止响应
- 告诉jquery draggable是动态拖动的
- 通过angularjs拖动动态更改模板
- 更新高度,宽度和jquery动态文本区域的样式,可拖动和可调整大小
- 设置图像可动态拖动