首页 > 解决方案 > Highstock 图表:导航器以负色显示错误区域

问题描述

嗨,友好的开发人员

我创建了一个带有highstock的图表,它是 highchart 的超集,添加了一个所谓的“导航器”(底部图表以选择图表的某个部分)。

我正在使用区域型图表,我的目标是将 0 以上的区域着色为绿色,0 以下的区域为红色。这在实际图表中效果很好,但在导航器中却不行。不知何故,导航器不会以红色显示 x 轴和图形之间的区域,而是图形下方的区域。这是一个示例:https ://stackblitz.com/edit/react-58f7s8?embed=1&file=index.js

我是否错过了 API 中的某些内容,这是一个错误还是预期的行为?

在此先感谢您的时间!G。

顺便说一句:这是代码片段(您也可以在 stackblitz 中找到):

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';

class App extends Component {

  render() {
     const config = {
        chart: {
          type: 'area',
        },
        series: [{
          color: 'green',
          negativeColor: 'red',
          data: [29.9, 71.5, 106.4, -129.2, -144.0, -176.0, 35.6, 148.5, 148.5, -216.4, 194.1, 95.6, 54.4]
      }]
    };
    return (
      <ReactHighstock config={config} />
    );
  }
}

render(<App />, document.getElementById('root'));

标签: highcharts

解决方案


如果有人正在寻找相同的东西:解决方案是在threshold: 0此处添加:

navigator: {
  series: {
    threshold: 0,
},

检查 API


推荐阅读