2017-02-21 2 views
0

Я использую HighCharts для создания 3-х уровневой развертки.Максимальное количество элементов x-Axis в HighCharts

Когда я использую более 50 элементов на втором уровне, текст элемента больше не отображается слева. Нажмите на первый элемент (Родитель 1), а затем вы увидите второй уровень и то, что не отображается.

Это из-за количества данных JSON, которые я использую?

Вот код, я использую для диаграммы

let options = { 
chart: { 
    type: 'bar', 
    events: { 
     drilldown: function (e) { 
      if (e.seriesOptions) { 
       e.seriesOptions.hiddenValue = e.point.options.hiddenValue; 
      } 
     } 
    } 
}, 
title: { 
    text: 'Overall Status' 
}, 
xAxis: { 
    type: 'category', 
    labels: { 
     style: { 
      fontSize: '15px' 
     } 
    } 
}, 
yAxis: { 
    title:{ 
      text: "Percentage Complete" 
     }, 
    labels: { 
     style: { 
      fontSize: '15px' 
     } 
    } 
}, 

legend: { 
    enabled: false 
}, 

plotOptions: { 
    series: { 
     borderWidth: 0, 
     dataLabels: { 
      enabled: true, 
      style: { 
       fontSize: '20px' 
      } 
     }, 
     cursor: 'pointer', 
     point: { 
      events: { 
       click: function() { 
        let seriesOptions = this.series && this.series.options; 
        let hiddenValue = seriesOptions && seriesOptions.hiddenValue; 
        if(this.options && this.options.url) { 
         location.href = this.options.url + '?id=' + hiddenValue; 
        } 
       } 
      } 
     } 
    } 
}, 
series: [{ 
    name: 'Status', 
    colorByPoint: true 
}], 
drilldown: { 
} 
}; 

У меня есть скрипка здесь есть данные в формате JSON. https://jsfiddle.net/mark2017/yb3y9dt9/

+0

Да, это связано с количеством пространства. IIRC, все бары будут отображаться, но эти метки не будут. – user3080953

ответ

2

Вы можете видеть, что первая развертка не начинается с 0, а начинается с 10 - как и во всех значениях из серии верхнего уровня. Это ошибка, о которой уже сообщалось в github: Drilldown to more than 50 - skip categories name

Установка cropTreshold на число, большее, чем количество всех ваших очков, похоже, работает в вашем случае - оно должно быть установлено для всех серий, например. в plotOptions.series

plotOptions: { 
    series: { 
    cropThreshold: 2000, 
    borderWidth: 0, 

Например: https://jsfiddle.net/hfpofx28/

+0

Спасибо за это, я пробовал изменение и да, имена теперь отображаются, но все еще не отображаются более 50 элементов? – user813813

+0

По пунктам вы имеете в виду этикетки или столбцы? Если метки сталкиваются, некоторые из них будут скрыты - чтобы преодолеть этот набор labels.step = 1 - если вы имеете в виду метки данных, вам нужно установить allowOverlap в значение true. https://jsfiddle.net/hfpofx28/1/ – morganfree

Смежные вопросы