Блог

Главная - Вопросы по программированию - Highcharts — проблема с событиями диаграммы Xrange

Highcharts — проблема с событиями диаграммы Xrange

#javascript #highcharts

#javascript #highcharts

Вопрос:

Я использую модуль диаграммы x-диапазона Highcharts для отображения диапазона из нескольких значений. У меня есть пара проблем при его реализации.

  1. Состояния hover и select не оказывают никакого влияния на диаграмму
  2. legend Значок не отображает цвет данных

Код ниже:

 var myChart7 = Highcharts.chart('sample', {
  chart: {
    type: 'xrange',
  },
  title: null,
  xAxis: {
    opposite: true,
    labels: {
      useHTML: true,
      formatter: function() {
        return this.value   "ms";
      },
    }
  },
  yAxis: {
    title: {
      text: ''
    },
    labels: {
      enabled: true,
    },
    categories: [],
    reversed: true
  },
  tooltip: {
    enabled: false
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true
      },
      allowPointSelect: true,
      states: {
        hover: {
          color: '#a4edba'
        },
        select: {
          color: '#EFFFEF',
          borderColor: 'black',
          dashStyle: 'dot'
        }
      },
      pointWidth: 15,
      borderRadius: 10,
      dashStyle: 'Solid',
    }
  },
  legend: {
    enabled: true,
    align: 'left',
  },
  series: [{
      color: '#C4D9FF',
      name: 'Sample 1',
      data: [{
        x: 0,
        x2: 90,
        y: 0,
        response: '200',
        color: '#C4D9FF',
        borderColor: '#789CDF',
      }],
    },
    {
      color: '#FFD7C5',
      name: 'Sample 2',
      data: [{
        x: 5,
        x2: 70,
        y: 1,
        response: '200',
        color: '#FFD7C5',
        borderColor: '#F99B6F',
      }],

    }, {
      color: '#DCFFF5',
      name: 'Sample 3',
      data: [{
        x: 35,
        x2: 70,
        y: 2,
        response: '400',
        color: '#DCFFF5',
        borderColor: '#35C097',
      }],
    }
  ],
});  
 <div id="sample">

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>

Ссылка на JSFiddle

Я не знаю, правильно ли я это реализую или неправильно. Пожалуйста, направьте меня. TIA.

Я работаю над версией Chrome 85 на Mac. Не тестировал его в других браузерах.

Ответ №1:

  1. Эти функции не были реализованы в версии Highcharts, которую вы используете. В текущей версии все работает нормально: https://jsfiddle.net/BlackLabel/trxjw4np /

  2. В типе серии x-range элемент легенды не наследует цвет из серии, но вы можете установить его программно.

Демонстрация: https://jsfiddle.net/BlackLabel/trxjw4np /

 events: {
    load() {
        let chart = this;
        
        chart.legend.allItems.forEach(item => {
            item.legendSymbol.css({
                fill: item.userOptions.color
            })
        })
    }
}

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

Комментарии:

1. Имея еще одну проблему на том же графике, первый и третий столбцы неправильно выровнены по линиям сетки (не по центру). Есть ли способ решить эту проблему? TIA

2. @AllanJebaraj я не уверен, в чем проблема и о какой демонстрации вы говорите. Не могли бы вы описать это более точно?

3. jsfiddle.net/BlackLabel/trxjw4np Ряды на графике не выровнены по вертикали с соответствующими метками оси y. Первый ряд (синий) не выровнен по вертикали с меткой «0»

4. @AllanJebaraj обратите внимание, что у вас есть 3 разных ряда, вам нужно отключить grouping их, чтобы они отображались так же, как точки: jsfiddle.net/BlackLabel/snuLvxcq