在highcharts中绘制散点图/ bubbleChart和Columnrange图
我要求使用highcharts。下面是我必须绘制的图表。
我能够在高图使用的tickposition数组中使用columnrange图表类型绘制水平条来获取标记， 但泡沫，我无法弄清楚如何做到这一点。每个泡泡都有一个工具提示。 下面是创建下面的列范围图表的jsfiddle。 Jsfiddle`
function _getDiamondGraphLabel(head, body, lvl, positionLeft, primeColor) {
var positionedTopClass = '',
headFormatted = '',
bodyFormatted = '',
positionedLeftClass = '';
if (lvl) {
positionedTopClass = 'diamond-graph-label-lvl-' + lvl;
}
if (positionLeft) {
positionedLeftClass = 'diamond-graph-label-left';
}
headFormatted = '<div class="diamond-graph-head-label">' + head + '</div>';
bodyFormatted = '<div class="diamond-graph-body-label"><b>' + body + '</b></div>';
var retVal = '<div ' + (primeColor ? 'style="border-color: ' + primeColor + '; border-width: 3px"' : '') + ' class="diamond-graph-label ' +
positionedTopClass + ' ' + positionedLeftClass + '""><div class="diamond-graph-label-content" ' +
(primeColor ? 'style="background-color: ' + primeColor + ' ; color: white"' : '') + '>' + headFormatted + bodyFormatted + '</div></div>';
return retVal;
}
var min = 49560,
per10 = 49560,
per25 = 63560,
per75 = 102537,
per90 = 119537,
median = 83362,
average = 89142,
max = 119537,
counter = 0;
var tickerPositions = [min, per10, per25, per75, per90, median, average, max];
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true,
plotBackgroundColor: '#e9e9e9',
height: 25,
plotHeight: 60,
width: $('#container')[0].clientWidth,
spacing: [0, 0, 0, 0]
},
title: {
text: ''
},
xAxis: {
tickLength: 0,
labels: {
enabled: false
}
},
yAxis: {
tickPositions: tickerPositions,
labels: {
useHTML: true,
formatter: function () {
// There is a bug in Highcharts that formatter is calling twice. (reset if the value is higher than tickers length)
if (counter >= tickerPositions.length) {
counter = 0;
}
counter++;
switch (counter) {
case 2:
return _getDiamondGraphLabel('10th', this.value, 0, false, '#000');
case 3:
return _getDiamondGraphLabel('25th', this.value, 1, false, '#000');
case 4:
return _getDiamondGraphLabel('75th', this.value, 1, true, '#000');
case 5:
return _getDiamondGraphLabel('90th', this.value, 0, true, '#000');
case 6:
return _getDiamondGraphLabel("Median", this.value, 2, average < median, "#000");
case 7:
return _getDiamondGraphLabel("Average", this.value, 2, average > median, '#000');
default:
return '<div></div>';
}
}
},
title: {
text: null
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
columnrange: {
grouping: false,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0
}
},
series: [{
name: 'MinTo10th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: min,
high: per10
}],
color: '#ebebeb'
}, {
name: '10thTo25th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per10,
high: per25
}],
color: '#bbbbbb'
}, {
name: '25thTo75th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per25,
high: per75
}],
color: '#6a6a6a'
}, {
name: '75thTo90th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per75,
high: per90
}],
color: '#bbbbbb'
}, {
name: '90thToMax',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per90,
high: max
}],
color: '#ebebeb'
}, {
name: 'median',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: median,
high: median + 1
}],
color: '#1a8099'
}, {
name: 'average',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: average,
high: average + 1
}],
color: '#006699'
}]
});
`
非常感谢帮助。
谢谢。
2 个答案:
答案 0 :(得分：1)
我会使用xrange类型而不是columnrange + inverted。然后使用简单的scatter类型来渲染气泡/标记。如果您可以使用Highstock，则可以使用flag类型系列来实现标记。不幸的是，您需要计算所有标记位置。注意：您可以为标志定义自己的形状。
替代解决方案是使用Renderer并手动渲染所有标记。
简单演示：http://jsfiddle.net/BlackLabel/3L3ofh0a/18/
段：
// Create the chart
Highcharts.chart('container', {
yAxis: {
min: -5,
max: 5
},
xAxis: {
startOnTick: false,
endOnTick: false,
min: 45000,
max: 150000
},
series: [{
data: [{
x: 50000,
x2: 60000,
y: 1,
color: '#ebebeb'
},
{
x: 60000,
x2: 90000,
y: 1,
color: '#bbbbbb'
},
{
x: 90000,
x2: 100000,
y: 1,
color: '#6a6a6a'
},
{
x: 100000,
x2: 102000,
y: 1,
color: '#bbbbbb'
},
{
x: 102000,
x2: 120000,
y: 1,
color: '#ebebeb'
}
],
borderWidth: 0,
borderRadius: 0,
type: 'xrange',
id: 'top'
// the event marker flags
}, {
data: [{
x: 60000,
x2: 70000,
y: -1,
color: '#ebebeb'
},
{
x: 70000,
x2: 95000,
y: -1,
color: '#bbbbbb'
},
{
x: 95000,
x2: 98000,
y: -1,
color: '#6a6a6a'
},
{
x: 98000,
x2: 102000,
y: -1,
color: '#bbbbbb'
},
{
x: 102000,
x2: 105000,
y: -1,
color: '#ebebeb'
}
],
borderWidth: 0,
borderRadius: 0,
type: 'xrange',
id: 'bottom'
// the event marker flags
}, {
type: 'flags',
data: [{
x: 50000,
y: 1,
title: '10th<br>50000',
text: '10th<br>50000'
}, {
x: 120000,
title: '90th<br>120000',
y: 1,
text: '90th<br>120000'
}],
y: -55
}, {
type: 'flags',
data: [{
x: 60000,
y: 1,
title: '25th<br>60000',
text: '25th<br>60000'
}, {
x: 102000,
title: '75th<br>102000',
y: 1,
text: '75th<br>102000'
}],
y: -95
}, {
type: 'scatter',
data: [
[61000, -2],
[63500, -2],
[66000, -2],
[66000, -2.4],
]
}]
});
答案 1 :(得分：0)
感谢您的帮助。
我们的应用程序中没有使用Highstocks，所以我不能使用旗帜系列。 我尝试绘制两个不同的图形，这是有效的。（一个是列范围，另一个是散点图）。但唯一的问题是对齐两个图形的刻度位置，以便图形的缩放匹配。 Here是指向它的链接。
Highcharts.SVGRenderer.prototype.symbols.sai = function (x, y, w, h) {
return ['M', x, y + h / 2, 'L', x + w, y + h / 2, 'M', x + w / 2, y, 'L', x + w / 2, y + h, 'z'];
};
function _getDiamondGraphLabel(head, body, lvl, positionLeft, primeColor) {
var positionedTopClass = '',
headFormatted = '',
bodyFormatted = '',
positionedLeftClass = '';
if (lvl) {
positionedTopClass = 'diamond-graph-label-lvl-' + lvl;
}
if (positionLeft) {
positionedLeftClass = 'diamond-graph-label-left';
}
headFormatted = '<div class="diamond-graph-head-label">' + head + '</div>';
bodyFormatted = '<div class="diamond-graph-body-label"><b>' + body + '</b></div>';
var retVal = '<div ' + (primeColor ? 'style="border-color: ' + primeColor + '; border-width: 3px"' : '') + ' class="diamond-graph-label ' +
positionedTopClass + ' ' + positionedLeftClass + '""><div class="diamond-graph-label-content" ' +
(primeColor ? 'style="background-color: ' + primeColor + ' ; color: white"' : '') + '>' + headFormatted + bodyFormatted + '</div></div>';
return retVal;
}
var min = 49560,
per10 = 49560,
per25 = 63560,
per75 = 102537,
per90 = 119537,
median = 83362,
average = 89142,
max = 119537,
counter = 0;
var tickerPositions = [min, per10, per25, per75, per90, median, average, max];
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'columnrange',
inverted: true,
plotBackgroundColor: '#e9e9e9',
height: 25,
plotHeight: 60,
width: $('#container')[0].clientWidth,
spacing: [0, 0, 0, 0]
},
title: {
text: ''
},
xAxis: {
tickLength: 0,
labels: {
enabled: false
}
},
yAxis: {
tickPositions: tickerPositions,
labels: {
useHTML: true,
formatter: function () {
// There is a bug in Highcharts that formatter is calling twice. (reset if the value is higher than tickers length)
if (counter >= tickerPositions.length) {
counter = 0;
}
counter++;
switch (counter) {
case 2:
return _getDiamondGraphLabel('10th', this.value, 0, false, '#000');
case 3:
return _getDiamondGraphLabel('25th', this.value, 1, false, '#000');
case 4:
return _getDiamondGraphLabel('75th', this.value, 1, true, '#000');
case 5:
return _getDiamondGraphLabel('90th', this.value, 0, true, '#000');
case 6:
return _getDiamondGraphLabel("Median", this.value, 2, average < median, "#000");
case 7:
return _getDiamondGraphLabel("Average", this.value, 2, average > median, '#000');
default:
return '<div></div>';
}
}
},
title: {
text: null
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
columnrange: {
grouping: false,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0
}
},
series: [{
name: 'MinTo10th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: min,
high: per10
}],
color: '#ebebeb'
}, {
name: '10thTo25th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per10,
high: per25
}],
color: '#bbbbbb'
}, {
name: '25thTo75th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per25,
high: per75
}],
color: '#6a6a6a'
}, {
name: '75thTo90th',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per75,
high: per90
}],
color: '#bbbbbb'
}, {
name: '90thToMax',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: per90,
high: max
}],
color: '#ebebeb'
}, {
name: 'median',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: median,
high: median + 1
}],
color: '#1a8099'
}, {
name: 'average',
stack: 'DIAMOND_STACK',
data: [{
x: 0,
low: average,
high: average + 1
}],
color: '#006699'
}]
});
Highcharts.chart('container2', {
chart: {
type: 'scatter',
plotBackgroundColor: 'transparent',
},
xAxis: {
min:min,
max: per90,
lineWidth:0,
labels: {
enabled: false,
gridLineWidth: 0,
tickLength: 0
}
},
title:{
text: ''
},
yAxis: {
tickLength: 0,
gridLineWidth: 0,
labels: {
enabled: false
},
min:0,
max:10,
title:{
text:''
}
},
legend: {
enabled: false
},
plotOptions: {
scatter: {
marker: {
symbol:'circle',
radius: 5,
lineColor: '#2c8dab',
lineWidth: 4,
states: {
hover: {
enabled: false,
lineColor: '#2c8dab'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Employee',
color: '#2c8dab',
data:[[min, 10], [63650, 10], [min, 9.1], [63650, 9.1]]
},
{
name: 'Employee',
color: '#2c8dab',
marker: {
radius:5,
symbol: 'sai',
lineWidth: 1.5,
lineColor: '#fff'
},
data:[[min, 9.1]]
}]
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？