Question

我最近更新了highstock，其中我使用了一个显示“扩展范围”值的图表，即最小和最大日期设置在图表数据边界之外。

更新后（修复了其他一些错误）我注意到根据实际系列中的数据，底部导航系列中的最后一个数据点不正确。可以看出，底部最右侧有一个额外的数据点，在实际系列中不存在。

Highstock navigator series extends data range

创建图表的代码如下

$(function () {
    var fromdate = new Date('2011-04-01');
    var todate = new Date('2012-05-21');
    var series = [{
        color: 'red',
        data: MSFT,
        name: 'MSFT'
    }];
    $('#container').highcharts('StockChart', {
        navigator: {
            series: {
                data: series[0].data,
                color: '#4572A7',
                fillOpacity: 0.05
            }
        },
        xAxis: {
            ordinal: false,
            min: fromdate.getTime(),
            max: todate.getTime()
        },
        legend: {
            enabled: true
        },
        series: series
    });
});

现在，如果我将navigator.series属性更改为

navigator: {
    series: series
}

导航图表是正确的，因为当没有更多可用数据时，值会在右侧被截断。这就是我要的;唯一的问题是颜色与系列相同，我希望它使用我的自定义颜色，如第一个例子。

那么如何配置HighStock来切断导航图中的最后一个值，同时能够为该系列使用自定义颜色？

Answer 1

嗯，好吧，我对这个问题有一个“快速修复”，因为我不知道如何配置highcharts来为我做这件事。

使用jQuery我可以在导航器中提取行，因为highcharts（至少）将一个类应用于该系列。它设置所有系列的类名，包括“主区”中的类名，但最后一个是它看起来的导航器系列，或者如果文档中有多个高级图表，则为每个奇数系列。

$(function () {
    // ... as previous
    $('#container').highcharts('StockChart', {
        navigator: {
            series: series
        },
         // ... as previous
    });

    // added code to apply a custom style to the navigator line diagram
    var navseries = $('.highcharts-series:last').children();
    // can be undefined if the series has no data points
    if (navseries) {
        navseries.css('stroke', '#4572A7');
        navseries.css('strokeWidth', 1);
        navseries.css('fillOpacity', 0.05);
    }
});

扩展最小和最大日期时，highcharts导航器系列中的数据点值不正确

1 个答案: