HighCharts JS - 在散点图上获取多个线性底图

Question

我正在尝试使用 HighCharts javascript 库制作一些可视化效果，主要是我希望制作与这些人在他们的页面上的内容非常相似的东西：

Research Affiliates - 10Yr Expected Risk & Return

主要是，我想弄清楚他们是如何设法在散点图上获得代表不同夏普比率水平的 2 个实线线性区域的。它只是一张背景图片，还是它们以某种方式在散点图下放置了一个面积图？

有没有人对此有任何经验，或者如何编码？

Answer 1

在您提到的网页上，区域类型系列用于在背景中生成三角形。

面积图演示：http://www.highcharts.com/demo/area-basic

面积图API参考：http://api.highcharts.com/highcharts#plotOptions.area

Answer 2

基本上，您可以组合任何类型的图表。

查看他们的demo of a scatter plot with a regression line。

以散点图结合堆积面积图为例，见以下代码和fiddle：

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
            }
        }]
    });
});

Fiddle

Answer 3

感谢您提醒我如何合并两个图表。我实际上最终使用的是多边形图类型而不是面积图。我还使用 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: {
         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();
        });
});

它产生了这个结果：

再次感谢您的提示！

HighCharts JS - 在散点图上获取多个线性底图

HighCharts JS - Getting multiple linear underlays on a scatter plot

javascript

visualization

highcharts