Ось x highcharts не отображается с серией только одного значения

Я использую highcharts для диаграммы. Я сделал серию с «connectedTo», потому что мне нужно сгруппировать столбцы по регионам и создать легенду, отображающую эти регионы. А пока результат желаемый. Но я не могу вывести название своих категорий по оси X. Под каждой колонкой должно быть «А», «Б», ... Как на картинке. Смотрите код в jsfiddle. Спасибо за помощь.

http://jsfiddle.net/yucca/hpkLy6t0/24/

// Create the chart
Highcharts.chart('container', {
chart: {
    type: 'column'
},
title: {
    text: 'TEST'
},
subtitle: {
    text: 'TEST'
},
xAxis: {
    type: 'category',
    categories: ['A', 'B', 'C', 'D']
},

legend: {
    enabled: true,
    labelFormatter: function() {
                                return  this.userOptions.id
                            }
},
plotOptions: {
    series: {
        borderWidth: 0,
        dataLabels: {
            enabled: false,
        }
    }
},

tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},

series: [
    {
    id:'China',
    color: '#004f9e',
    data: [1100]
     },
     {
     id:'International',
     color: '#e73357',
      data: [10]
     },
     {
     linkedTo: 'International',
     color: '#e73357',
     data: [1000]
     },
     {
     linkedTo: 'China',
     color: '#004f9e',
      data: [686]
      }
    ]
});

график

1
0
478
1

Ответы 1

Вам нужно немного изменить ваш series, чтобы это работало.

series: [{
        data: [{
            id:'China',
            color: '#004f9e',
            y: 1100
         },{
            id:'International',
            color: '#e73357',
            y: 10
         },{
            linkedTo: 'International',
            color: '#e73357',
             y: 1000
         },{
         linkedTo: 'China',
         color: '#004f9e',
          y: 686
          }], 
       }]

Я сделал следующее:

  • Я изменил data[], чтобы он содержал массив ваших значений.
  • Я изменил значения, хранящиеся как data: [686], на y: 686

Здесь вы можете найти рабочий JSFiddle

Большое спасибо за ответ. По минусам, с вашим решением легенда не такая, как хотелось бы. Тем временем я нашел это решение, используя grouping: false в plotOptions of the series> jsfiddle.net/yucca/jb33sza0/4 Еще раз спасибо. Хорошего дня

user3951700 11.04.2018 13:58

@ user3951700 А, это решение намного проще. Я тоже искал его, но не нашел. Счастлив, что у вас все получилось!

user9420984 11.04.2018 14:00

Другие вопросы по теме