Высокие диаграммы назначают метку максимальному значению оси X

Question

Высокие диаграммы назначают метку максимальному значению оси X

1

У меня есть диаграмма Highcharts с установленным максимальным значением оси x. Можно увидеть по адресу:

То, что я хочу сделать, это установить метку для моей оси max x. Поэтому в конце моей диаграммы, где сказано 100, я хочу, чтобы это можно было установить на случайную строку, такую как butterfly. Мои значения по оси x установлены в category, поэтому мне все равно, что ось x показывает числа.

Мой JavaScript-код выглядит так:

$('#container').highcharts({
    xAxis: {
        type: 'category',
        max: 100
    },
    series: [{
        data: [0, 1, 56, 32]
    }]
});

Не уверен, есть ли функция в Highcharts, которая позволит мне это сделать.

Другой вариант, который я имею в виду для достижения этого, - это выписать каждую категорию. Как у меня в этом:

http://jsfiddle.net/7N8he/29/

Тем не менее, я надеюсь, что существует менее избыточный способ достижения этого, поскольку я хочу изменить последнее значение оси X для серии, которая не достигла конца (то есть максимальная ось x). Вы заметите, что в обоих моих примерах точки данных не достигают оси x.

Jason Chen 13 фев. 2018, в 02:13

Источник

Теги:

javascript

highcharts

1 ответ

Ещё вопросы

Deep 3015 · Accepted Answer · 2018-02-13T05-25-00.000Z

Вы можете сделать это

  chart: {
    events: {
      load: function() {
        //console.log(this.xAxis[0])
        this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly";  //update last element of array

        this.update({
          xAxis: {
            categories: this.xAxis[0].paddedTicks,
            max: this.xAxis[0].tickPositions.length-1 //update chart max value to number of element in category array
          }
        })
      }
    }
  },

Обратите внимание, что полная демоверсия страницы будет отображаться правильно

$('#container').highcharts({
  chart: {
    events: {
      load: function() {
        this.xAxis[0].paddedTicks[this.xAxis[0].paddedTicks.length - 1] = "butterfly";
        //console.log(this.xAxis[0])
        this.update({
          xAxis: {
            categories: this.xAxis[0].paddedTicks,
            max: this.xAxis[0].tickPositions.length-1
          }
        })
      }
    }
  },
  xAxis: {
    type: 'category',
    max: 100
  },

  series: [{
    data: [0, 1, 56, 32]
  }]

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://github.highcharts.com/highcharts.js"></script>
<script src="https://github.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>

Демо-версия скрипта