Изменение yAxis и plotOptions для детализации

Question

Я использую HighCharts для визуализации процентов от проектов, которые сбрасываются в переменные, которые составляют проценты!

Я дам мой код:

$(function() { 

    // Create the chart 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Comparison' 
     }, 
     xAxis: { 
      type: 'category' 
     }, 
     yAxis: { 
      title: { 
       enabled: true, 
       text: 'Percentages', 
       style: { 
        fontWeight: 'normal' 
       } 
      }, 
      labels: { 
       format: '{value}%' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 

     plotOptions: { 
      series: { 
       borderWidth: 0, 
       dataLabels: { 
        enabled: true, 
        format: '{point.y:.1f}%' 
       } 
      } 
     }, 
     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: [{ 
      name: '', 
      colorByPoint: true, 
      data: [] 
     }], 
     credits: { 
      enabled: false 
     }, 
     drilldown: { 
      series: [{ 
       name : '', 
       id: '', 
       data: [] 
      }] 
     } 
    }; 
    $.getJSON('/uploads/fraction.json', function (list) { 
     options.series = list; 

    }); 
    $.getJSON('/uploads/drilldown.json', function (list2) { 
     options.drilldown.series = list2; 
     var chart = new Highcharts.Chart(options); 
    }); 
}); 

Пример из JSONs:

fraction.json

[{"name":"","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3},{"name":5,"y":"","drilldown":5},{"name":6,"y":53.160248409091,"drilldown":6}]}] 

drilldown.json

[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]},{"name":5,"id":5,"data":[["Total",""],["Estimated",0.44]]},{"name":6,"id":6,"data":[["Total",0.233905093],["Estimated",0.44]]}] 

Я хотел бы, график, показывающий процент s над столбцом и на yAxis при первом загрузке графика, но абсолютные значения при активизации развертки. Мне до сих пор не удалось это получить. Не могли бы вы помочь мне?

Answer 1

Есть два способа сделать эти изменения - статический и динамический путь. Статический путь - определение меток данных и подсказок для рядов разверток.

Динамический путь - примените параметры событий детализации/сверления.

events: { 
    drilldown: function(options) { 
     this.yAxis[0].update({ 
     labels: { 
      format: '{value}' 
     } 
     }, false, false); 

     options.seriesOptions.dataLabels = { 
     format: '{point.y:.1f}' 
     }; 

     options.seriesOptions.tooltip = { 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>' 
     }; 
    }, 
    drillup: function() { 
     this.yAxis[0].update({ 
     labels: { 
      format: '{value}%' 
     } 
     }, false, false); 
    } 
    } 

пример: http://jsfiddle.net/d4fmaeea/

Два предупреждения:

1. В ваших JSon файлов, у вас есть точки, которые имеют значение равно "", которое не является допустимым типом (должно быть номер/null), и это может вызвать некоторые проблемы, например столбец со значением 0 будет иметь ту же высоту, что и столбец со значением 10.

2. $.getJSON() является асинхронной функцией. Вы используете getJSON для назначения list в options.series, но эта часть может быть выполнена после создания диаграммы, чтобы вы могли получить диаграмму без серий верхнего уровня, только с деталями развертки.

Асинхронный часть кода:

$.getJSON('/uploads/fraction.json', function (list) { 
    options.series = list; 

}); 
$.getJSON('/uploads/drilldown.json', function (list2) { 
    options.drilldown.series = list2; 
    var chart = new Highcharts.Chart(options); 
});