在高图中查找并填充折线图与绘图线的交点

Question

我正在使用 Angular 开发应用程序，并且对这个高图表非常新。我有一个要求，我们应该在哪里获得绘图线和第一个折线图的交点，这是下面的现有代码。你能帮我实现这个目标吗？我想用颜色填充整个交叉区域，因为我在附件中用红色突出显示。提前致谢。

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        },
        plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 76500
        }]
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [143934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    },
{
        name: 'Installation2',
        data: [14393, 2503, 7177, 9658, 7031, 19931, 13133, 14175]
    }]  

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Basic line chart showing trends in a dataset. This chart includes the
        <code>series-label</code> module, which adds a label to each line for
        enhanced readability.
    </p>
</figure>

。

Answer 1

你可以使用颠倒的area系列和区域，例如：

    series: [{
            ...,
            type: 'area',
            fillColor: 'transparent',
            threshold: 200000,
            zones: [{
                value: 76500,
                fillColor: 'orange',
                color: 'red'
            }]
        },
        ...
    ]

---

现场演示： http://jsfiddle.net/BlackLabel/Lom6kcnv/

API 参考： https://api.highcharts.com/highcharts/series.area.zones