我正在寻找将水平平均线添加到基于线的高图表的可能性。它应该只计算实际可见点的平均值（重绘缩放级别的重绘）以及每个系列的平均值。
我只找到一个calculates one average over all series的例子。
答案 0 :(得分：0)
以下是根据缩放级别（受the solution of @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]
]
});
}