我试图使用HighCharts JavaScript库，使一些可视化，主要是我希望做一些非常相似，以这些家伙有自己的网页上有多个线性底图：HighCharts JS - 获取在散点图上
Research Affiliates - 10Yr Expected Risk & Return
主要是，我试图弄清楚他们如何设法得到散射图上代表不同夏普比率水平的2个实线性区域。它只是一个背景图像，或者它们以某种方式在散点图下面覆盖了一个区域图表？
有没有人有这个方面的经验，或如何编写代码呢？
基本上，你可以将任何类型的图表类型。
查看他们的demo of a scatter plot with a regression line。
作为散点图与堆叠面积图组合的一个例子，请看下面的代码和小提琴：
var Y_MAX = 6;
var X_MAX = 5;
$(function() {
$('#container').highcharts({
title: {
text: 'Scatter plot with stacked area ratio chart'
},
plotOptions: {
area: {
stacking: 'normal'
}
},
xAxis: {
min: 0,
max: X_MAX
},
yAxis: {
min: 0,
max: Y_MAX
},
series: [{
type: 'area',
name: 'Ratio',
data: [{x: 0, y: 0}, {x: X_MAX, y: 0.4*Y_MAX}]
}, {
type: 'area',
name: 'Ratio',
data: [{x: 0, y: 0}, {x: X_MAX, y: 0.6*Y_MAX}]
}, {
type: 'scatter',
name: 'Observations',
data: [1, 0.5, 3.8, 5.5, 3.9, 2.2],
marker: {
radius: 8
}
}]
});
});
在网页上，您所指的区域类型系列用于在背景中生成三角形形状。
面积图演示：http://www.highcharts.com/demo/area-basic
区域图表API参考：http://api.highcharts.com/highcharts#plotOptions.area
感谢如何两者结合起来的头部向上图表。 我最终使用的是多边形绘图类型而不是面积图。 我也使用Chart.renderer.label呈现标签。 仍在调整这一点，但作为一个整体的参考，这是我的代码（减去取出数据）
$(function() {
$('#scatter-plot').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Expected Asset Return Against Volatility'
},
legend: {
enabled: false
},
xAxis: {
title: {
text: 'Volatility',
enabled: true,
style: {
fontWeight: 'bold',
fontSize: '18px',
fontFamily: 'PT Sans',
}
},
min: 0,
lineWidth: 0,
lineColor: '#bfbfbf',
gridLineWidth: 0,
tickWidth: 0,
labels: {
format: '{value} %',
style: {
fontSize: '14px',
fontFamily: 'Arial',
}
}
},
yAxis: {
title: {
text: 'Real Expected Returns',
style: {
fontWeight: 'bold',
fontSize: '18px',
fontFamily: 'PT Sans',
},
enabled: true
},
gridLineWidth: 0,
lineWidth: 1,
endOnTick: true,
maxPadding: 0,
startOnTick: true,
minPadding: 0,
lineColor: '#bfbfbf',
minRange: 2,
plotLines: [{
color: '#bfbfbf',
width: 1,
value: 0,
zIndex: 5
}],
labels: {
format: '{value} %',
style: {
fontSize: '14px',
fontFamily: 'Arial',
}
}
},
series: [
{
type: 'polygon',
color: 'rgba(100,100,100, 0.1)',
data: [[0, 0], [20, 10], [20, 0]]
},
{
type: 'polygon',
color: 'rgba(100,100,100, 0.1)',
data: [[0, 0], [20, 20], [20, 0]]
},
{type: 'scatter',
marker: {
\t radius: 10,
symbol: 'circle',
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
dataLabels: {
enabled: true,
x: -8,
y: -8,
fontFamily: 'PT Sans',
color: 'rgba(50, 50, 50, 0.8)',
format: '{series.name}'
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Volatility: {point.x}%<br>Exp. Return: {point.y}%'
},name: 'United-States',color: 'rgba(215, 40, 40, 0.6)',data: [[15.8,5.9]]},
//Rest of the data here, repeating in the same format as above^^
},
function (chart) { // on complete
chart.renderer.label('<div style="font-size:18px;">0.1 Sharpe Ratio</div>',
$(chart.container).width() - 200,
$(chart.container).height() - 150,
true)
.css({
color: 'rgba(0,0,0,0.5)'
})
.add();
chart.renderer.label('<div style="font-size:18px;">0.2 Sharpe Ratio</div>',
$(chart.container).width() - 200,
$(chart.container).height() - 250,
true)
.css({
color: 'rgba(0,0,0,0.5)'
})
.add();
});
});而且它产生这样的结果：再次
谢谢提示！