高图(高库存)-在导航器中隐藏所有标记

时间:2018-11-07 12:42:40

标签: highcharts

在导航器中隐藏标记几乎没有什么麻烦 问题是我将marker.enabled设置为false之后。它什么也没做。 (JS小提琴-第75行)

navigator: {
    series: {
       lineWidth: 0,
       marker: {
          enabled: false // this should hide markers
       }
    }

}

什么都不做,因为我有一些条件,如果条件为真,我需要在该点插入标记,例如:(JS小提琴-第63行)。

顺便说一句,在JSfiddle示例中,我为每个点都设置了它,但这没关系。

series: [{
   data: {
      x: ...,
      y: ...,
      marker: {
         enabled: true
      }
   }
]}

-所以当我在那一点上手动设置它时,它将覆盖全局导航器选项

问题-每个标记都会覆盖标记的全局导航器选项。

目标-隐藏导航器中的所有标记。

JSFiddle

解决方案

如果图表中仅 1个意向,请选择Wojciech Smiel答案。

如果图形中的 1个意向以上,则-首先必须使用禁用标记来制作系列数组,然后设置类似的选项

navigator: {
   series: seriesArray // array with the series and disabled marker
}

1 个答案:

答案 0 :(得分:1)

引用Highcharts navigator documentation

  

除非在navigator.series上显式定义了数据,否则该数据为   从图表的第一个系列借来的。

这就是为什么导航器系列具有标记的原因,尽管您在导航器选项中将其禁用了。但是,您可以为导航器添加单独的数据,在其中可以禁用每个点的标记。查看下面发布的演示。

代码:

function generateData(markers) {
  // generate an array of random data
  var data = [],
    time = (new Date()).getTime(),
    i;

  for (i = -999; i <= 0; i += 1) {
    data.push({
      x: time + i * 1000,
      y: Math.round(Math.random() * 100),
      marker: {
        enabled: markers
      }
    });
  }

  return data;
}

// Create the chart
Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {
        // set up the updating of the chart each second
        var chart = this,
          series = this.series[0],
          seriesNav = this.series[1];

        setInterval(function() {
          var x = (new Date()).getTime(), // current time
            y = Math.round(Math.random() * 100);

          series.addPoint([x, y], false);
          seriesNav.addPoint([x, y], true, true);
        }, 1000);

      }
    }
  },

  time: {
    useUTC: false
  },

  rangeSelector: {
    buttons: [{
      count: 1,
      type: 'minute',
      text: '1M'
    }, {
      count: 5,
      type: 'minute',
      text: '5M'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: false,
    selected: 0
  },

  title: {
    text: 'Live random data'
  },

  exporting: {
    enabled: false
  },

  plotOptions: {
    series: {
      marker: {
        enabled: true
      }
    }
  },

  series: [{
    name: 'Random data',
    showInNavigator: true,
    data: generateData(true)
  }],
  navigator: {
    series: {
      lineWidth: 0,
      marker: {
        enabled: false
      },
      data: generateData(false)
    }
  }
});

演示: https://jsfiddle.net/BlackLabel/1um9gs47/21/