Highcharts (highstock) - скрыть все маркеры в навигаторе - PullRequest
0 голосов
/ 07 ноября 2018

У меня возникли небольшие проблемы со скрытием маркеров в навигаторе Проблема в том, что после того как я установил marker.enabled в false. Это ничего не делает. (JS Fiddle - строка 75)

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

}

Это ничего не делает, потому что у меня есть какое-то условие, когда, если условие истинно, мне нужно вставить маркер в этой точке, например: (JS fiddle - строка 63).

Кстати ... в этом примере JSfiddle я устанавливаю его для каждой точки, но это не имеет значения.

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

- поэтому, когда я установлю его на эту точку вручную, он переопределит глобальные параметры навигатора

ПРОБЛЕМА - Опция глобального навигатора для маркера переопределяется каждой отдельной точкой.

ЦЕЛЬ - Скрыть все маркеры в навигаторе.

JSFiddle

СТАРЫЕ РЕШЕНИЯ

Если у вас на графике только 1 серия - возьмите ответ Войцех Смель.

Если у вас более 1 серии на графике - вы должны сначала создать массив рядов с отключенным маркером, а затем установить параметры, подобные этой

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

НОВОЕ РЕШЕНИЕ

Мой друг недавно нашел лучшее и более простое решение, у каждой серии есть свойство navigatorOptions, где вы можете установить radius для маркера, если вы установите его на 0, он будет скрыт.

serie.navigatorOptions = { marker: { radius: 0 } };

1 Ответ

0 голосов
/ 07 ноября 2018

Цитирование документации Highcharts навигатор :

Если данные явно не определены в 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...