Highcharts 将平均线添加到 BoxPlot 图表
Highcharts add a Mean line to BoxPlot chart
有没有办法在 BoxPlot 图表的条形图中添加另一条线来表示均值(平均值)? 这看起来像自动绘制的中值线在下面为您 Fiddle
http://jsfiddle.net/tLucL6mq/3/
Fiddle代码:
$('#container').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'Sample Base Salary Range'
},
legend: {
enabled: false
},
xAxis: {
categories: ['4', '3', '2', '1', '0'],
title: {
text: 'Job Level'
}
},
yAxis: {
title: {
text: 'Base Salary'
}
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
medianColor: '#0C5DA5',
medianWidth: 3
}
},
series: [{
name: "Observation Data",
data: [
['0', 68, 75, 79, 82, 84, 89], //level 4 - category 0
['1', 53, 63, 68, 72, 75, 79], //level 3 - category 1
['2', 47, 52, 59, 64, 67, 68], //level 2 - category 2
['3', 35, 37, 39, 42, 46, 51], //level 1 - category 3
['4', 32, 33, 34, 38, 40, 45] //level 0 - category 4
],
tooltip: {
headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
pointFormat: '- Max: {point.high}<br/>' +
'- Q3: {point.q3}<br/>' +
'- Median: {point.median}<br/>' +
'- Q1: {point.q1}<br/>' +
'- Min: {point.low}<br/>'
}
}, {
name: "Outlier Data",
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 74],
[1, 67],
[4, 40],
[4, 48]
],
marker: {
fillColor: 'yellow',
lineWidth: 2,
lineColor: '#0C5DA5'
},
tooltip: {
headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
pointFormat: 'Base Salary: {point.y}'
}
}]
});
我没有在文档中看到如何执行此操作...这可能吗?
此外,在示例中,当您将鼠标悬停在箱线图的任何部分时,会弹出工具提示。 有没有办法在您将鼠标悬停在中值或四分之一上时显示工具提示,以便它只显示该数据点的信息?
我认为这类似于散点图系列的工具提示如何显示各个点的数据。
编辑:
我终于明白了传递点对象而不是每个数据集的值数组的语法。在获得正确的对象语法后,我为 mean
添加了一个新的 属性 并将该值包含在工具提示中。
http://jsfiddle.net/tLucL6mq/4/
series: [{
name: "Observation Data",
data: [
{x: '0', low: 68, q1: 75, median: 79, q3: 82, high: 84, mean: 77.6}, //level 4 - category 0
{x: '1', low: 53, q1: 63, median: 68, q3: 72, high: 75, mean: 66.2}, //level 3 - category 1
{x: '2', low: 47, q1: 52, median: 59, q3: 64, high: 67, mean: 57.8}, //level 2 - category 2
{x: '3', low: 35, q1: 37, median: 39, q3: 42, high: 46, mean: 39.8}, //level 1 - category 3
{x: '4', low: 32, q1: 33, median: 34, q3: 38, high: 40, mean: 35.4} //level 0 - category 4
],
tooltip: {
headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
pointFormat: '- Min: {point.low}<br/>' +
'- Q1: {point.q1}<br/>' +
'- Median: {point.median}<br/>' +
'- Q3: {point.q3}<br/>' +
'- Max: {point.high}<br/>' +
'- Mean: {point.mean}<br/>'
}
}
这几乎是我想要的,但理想情况下,我希望看到每个数据集的框上显示 mean
行,就像 median
行一样。
一般不支持添加这样的行,但它是Highcharts,所以你可以扩展默认功能:http://jsfiddle.net/tLucL6mq/5/ ;)
简单片段:
(function (H) {
// when changing point format for boxplot, values will calculate automatically
H.seriesTypes.boxplot.prototype.pointArrayMap = ['low', 'q1', 'median', 'q3', 'high', 'mean'];
H.seriesTypes.boxplot.prototype.toYData = function (point) {
return [point.low, point.q1, point.median, point.q3, point.high, point.mean];
};
// draw lines after default drawPoints is called:
H.wrap(H.seriesTypes.boxplot.prototype, 'drawPoints', function (p) {
p.call(this);
var chart = this.chart,
r = chart.renderer,
xAxis = this.xAxis,
yAxis = this.yAxis,
x, y;
// for each point, draw line:
H.each(this.points, function (p, i) {
x = p.shapeArgs.x;
y = p.meanPlot;
if (p.meanPlotX) {
// update existing path:
p.meanPlotX.attr({
d: ['M', x, y, 'L', x + p.shapeArgs.width, y]
});
} else {
// create mean-line for the first time
p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({
stroke: 'black',
'stroke-width': 2
}).add(p.series.group);
}
});
});
})(Highcharts)
额外:
由于前两种方法(pointArrayMap
和 toYData
),它将适用于您以前的格式 [x, y1, y2, y3, y4, y5, y6]
,当然在 y6=mean 的情况下:http://jsfiddle.net/tLucL6mq/7/
有没有办法在 BoxPlot 图表的条形图中添加另一条线来表示均值(平均值)? 这看起来像自动绘制的中值线在下面为您 Fiddle
http://jsfiddle.net/tLucL6mq/3/
Fiddle代码:
$('#container').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'Sample Base Salary Range'
},
legend: {
enabled: false
},
xAxis: {
categories: ['4', '3', '2', '1', '0'],
title: {
text: 'Job Level'
}
},
yAxis: {
title: {
text: 'Base Salary'
}
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
medianColor: '#0C5DA5',
medianWidth: 3
}
},
series: [{
name: "Observation Data",
data: [
['0', 68, 75, 79, 82, 84, 89], //level 4 - category 0
['1', 53, 63, 68, 72, 75, 79], //level 3 - category 1
['2', 47, 52, 59, 64, 67, 68], //level 2 - category 2
['3', 35, 37, 39, 42, 46, 51], //level 1 - category 3
['4', 32, 33, 34, 38, 40, 45] //level 0 - category 4
],
tooltip: {
headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
pointFormat: '- Max: {point.high}<br/>' +
'- Q3: {point.q3}<br/>' +
'- Median: {point.median}<br/>' +
'- Q1: {point.q1}<br/>' +
'- Min: {point.low}<br/>'
}
}, {
name: "Outlier Data",
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 74],
[1, 67],
[4, 40],
[4, 48]
],
marker: {
fillColor: 'yellow',
lineWidth: 2,
lineColor: '#0C5DA5'
},
tooltip: {
headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
pointFormat: 'Base Salary: {point.y}'
}
}]
});
我没有在文档中看到如何执行此操作...这可能吗?
此外,在示例中,当您将鼠标悬停在箱线图的任何部分时,会弹出工具提示。 有没有办法在您将鼠标悬停在中值或四分之一上时显示工具提示,以便它只显示该数据点的信息?
我认为这类似于散点图系列的工具提示如何显示各个点的数据。
编辑:
我终于明白了传递点对象而不是每个数据集的值数组的语法。在获得正确的对象语法后,我为 mean
添加了一个新的 属性 并将该值包含在工具提示中。
http://jsfiddle.net/tLucL6mq/4/
series: [{
name: "Observation Data",
data: [
{x: '0', low: 68, q1: 75, median: 79, q3: 82, high: 84, mean: 77.6}, //level 4 - category 0
{x: '1', low: 53, q1: 63, median: 68, q3: 72, high: 75, mean: 66.2}, //level 3 - category 1
{x: '2', low: 47, q1: 52, median: 59, q3: 64, high: 67, mean: 57.8}, //level 2 - category 2
{x: '3', low: 35, q1: 37, median: 39, q3: 42, high: 46, mean: 39.8}, //level 1 - category 3
{x: '4', low: 32, q1: 33, median: 34, q3: 38, high: 40, mean: 35.4} //level 0 - category 4
],
tooltip: {
headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
pointFormat: '- Min: {point.low}<br/>' +
'- Q1: {point.q1}<br/>' +
'- Median: {point.median}<br/>' +
'- Q3: {point.q3}<br/>' +
'- Max: {point.high}<br/>' +
'- Mean: {point.mean}<br/>'
}
}
这几乎是我想要的,但理想情况下,我希望看到每个数据集的框上显示 mean
行,就像 median
行一样。
一般不支持添加这样的行,但它是Highcharts,所以你可以扩展默认功能:http://jsfiddle.net/tLucL6mq/5/ ;)
简单片段:
(function (H) {
// when changing point format for boxplot, values will calculate automatically
H.seriesTypes.boxplot.prototype.pointArrayMap = ['low', 'q1', 'median', 'q3', 'high', 'mean'];
H.seriesTypes.boxplot.prototype.toYData = function (point) {
return [point.low, point.q1, point.median, point.q3, point.high, point.mean];
};
// draw lines after default drawPoints is called:
H.wrap(H.seriesTypes.boxplot.prototype, 'drawPoints', function (p) {
p.call(this);
var chart = this.chart,
r = chart.renderer,
xAxis = this.xAxis,
yAxis = this.yAxis,
x, y;
// for each point, draw line:
H.each(this.points, function (p, i) {
x = p.shapeArgs.x;
y = p.meanPlot;
if (p.meanPlotX) {
// update existing path:
p.meanPlotX.attr({
d: ['M', x, y, 'L', x + p.shapeArgs.width, y]
});
} else {
// create mean-line for the first time
p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({
stroke: 'black',
'stroke-width': 2
}).add(p.series.group);
}
});
});
})(Highcharts)
额外:
由于前两种方法(pointArrayMap
和 toYData
),它将适用于您以前的格式 [x, y1, y2, y3, y4, y5, y6]
,当然在 y6=mean 的情况下:http://jsfiddle.net/tLucL6mq/7/