javascript - 类型区域范围的 Highcharts 不显示圆圈等标记

Question

我试图在 Area-range 类型的 Highcharts 上显示标记，但无法这样做。

jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange/ chart with markers for series data

Answer 1

我认为您无法从标记选项的 Angular 执行此操作，因为 Highcharts API 不包含“区域范围”类型图表的标记。

我认为您可以做到这一点的唯一方法是在图表上绘制最大值和最小值作为覆盖范围的线，并将它们链接在一起。

此处为 JSFiddle 示例:

http://jsfiddle.net/8pm9rohu/1/

我尝试使用您的原始示例(基于提供的数据集)，但数据集太大，无法在图表上绘制标记看起来很好。

在这种不太可能发生的情况下，您将获得这样的预定义数据数组，而不是自己构建它，您可以循环遍历数据并将最小值和最大值提取到它们自己的数组中，以在图表。

即(鉴于“范围”是提供的数据集):

var maxArray = [];
var minArray = [];
var dataArrayLength = ranges.length;
for (var i = 0; i < dataArrayLength; i++) {
    minArray[i] = [ranges[i][0], ranges[i][1]];
    maxArray[i] = [ranges[i][0], ranges[i][2]];
}

不过，希望您自己创建此数据集，并且您将能够在与创建范围数组相同的函数中创建数据的最小和最大数组，并将这些额外的数组传递给图表。

附言请记住确保您的最小和最大系列使用相同的模式(即标记类型、颜色等)!否则它会看起来很傻...

series: [{
        name: 'Max',
        showInLegend: false, 
        data: maxArray,
        zIndex: 1,
        color: Highcharts.getOptions().colors[0],
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0],
            symbol: 'circle'
        }
    }, {
        name: 'Min',
        showInLegend: false, 
        data: minArray,
        zIndex: 1,
        color: Highcharts.getOptions().colors[0],
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0],
            symbol: 'circle'
        }
    }, {
        name: 'Range',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0
    }]