Показывать только первый и последний ярлык xAxis в Highcharts - PullRequest
Новая
       55

Показывать только первый и последний ярлык xAxis в Highcharts

1 голос
/ 02 марта 2020

Я хотел бы отображать только первый и последний ярлык на моей оси xAxis. Это дало бы достаточно «рамки» для пользователя. Однако мне это не удается. Я работаю с синхронизированным графиком, который можно найти здесь . Второй и третий »столбец« (меньших) графиков, на которые я нацеливаюсь.

Я пытался работать с «startOnTick« и »endOnTick«, но это не сработает. 

    xAxis: {
      crosshair: true,
      events: {
        setExtremes: syncExtremes
      },
      visible: i === 1,
      showFirstlabel: true,
      showLastlabel: true,
      startOnTick: true,
      endOnTick: true,
      labels: {
        step: 500,
        format: '{value}'
      }
    },

Как правильно заставить Highcharts отображать только первую и последнюю метку?

Здесь - короткая скрипка (не знаю, почему строка не появляется; он показывает значения при наведении мыши ...).

Спасибо за любые подсказки.

1 Ответ

1 голос
/ 02 марта 2020
  • Вы можете использовать обратный вызов xAxis.labels.formatter для отображения желаемых тиков:

Демо: https://jsfiddle.net/BlackLabel/m2Ln8sdg/

    xAxis: {
    tickAmount: 10,
        labels: {
        formatter() {
        if(this.isFirst || this.isLast) {
            return this.value
        } else {
            return ''
        }
      }
    }
  },

API: https://api.highcharts.com/highcharts/xAxis.labels.formatter

  • Если вы хотите иметь больше контроля над этим (например, скрыть метку и галочку), вы можете использовать загрузку метод обратного вызова и соответствующие логики c для скрытия / показа галочек:

Демо: https://jsfiddle.net/BlackLabel/fbcdskmv/

  chart: {
    events: {
      load() {
        let chart = this;

        for (let i in chart.xAxis[0].ticks) {
            //hide all
          chart.xAxis[0].ticks[i].label.hide()
          chart.xAxis[0].ticks[i].mark.hide()
                    // show first and last tick
          if (chart.xAxis[0].ticks[i].isFirst || chart.xAxis[0].ticks[i].isLast) {
            chart.xAxis[0].ticks[i].mark.show()
            chart.xAxis[0].ticks[i].label.show()
          }
        }
      }
    }

API: https://api.highcharts.com/highcharts/chart.events.load

...