Развертка на столбчатой ​​диаграмме с использованием Highcharts

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

Обратите внимание, что приведенные примеры данных взяты из скрипта Python.

Пример столбцовой диаграммы

function create_graph() {

var maingraph = {{ maingraph|safe }}
chart = new Highcharts.Chart ({
    chart: {
         height: 600,
         width: 1200,
         renderTo: container1,
         type: 'column'
         //reflow: false
    },
    title: {
        text: maingraph[0].graphTitle
    },
    xAxis: {
        categories: maingraph[0].xAxisLabels
    },
    yAxis: {
        min: 0,
        title: {
            text: maingraph[0].yAxisTitle
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: generateMainData({{ maingraph|safe }}),
    <!--drilldown: {
        <!--series: generateChildData({{ childgraph|safe }})
    <!--}
 });
}

function generateMainData(g) {
    return [{ name: 'Males',
              data: g[0].yAxisValues
              <!--drilldown: what to write here?
    }, {
        name: 'Females',
        data: g[1].yAxisValues }];
        <!--drilldown: what to write here?
}

if ({{ maingraph|safe }}) {
    create_graph();
}

</script>

maingraph = [{'xAxisLabels': ['Trait1', 'Trait2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Title', 'xAxisTitle': 'Traits', 'yAxisValues': [0.41, 0.71]}, {'xAxisLabels': ['Trait1', 'Trait2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Title', 'xAxisTitle': 'Traits', 'yAxisValues': [0.28, 0.27]}]

childgraph = [{'Trait1': {'xAxisLabels': ['Facet1', 'Facet2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Title', 'xAxisTitle': 'Facets', 'yAxisValues': [0.19, 0.17]}, 'Trait2': {'xAxisLabels': ['Facet3', 'Facet4'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Facets', 'xAxisTitle': 'Facets', 'yAxisValues': [0.96, 0.22]}}, {'Trait1': {'xAxisLabels': ['Facet1', 'Facet2'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Facets', 'xAxisTitle': 'Facets', 'yAxisValues': [0.33, 0.34]}, 'Trait2': {'xAxisLabels': ['Facet3', 'Facet4'], 'yAxisTitle': 'yTitle', 'graphTitle': 'Facets', 'xAxisTitle': 'Facets', 'yAxisValues': [0.12, 0.42]}}]

Что я хочу, так это то, что когда я нажимаю на столбец Trait1 на основном графике, я должен получить два столбца Facet1 и Facet2. Трудность заключается в том, как заставить сценарий различать столбцы для мужчин и женщин для одной и той же черты.


javascript highcharts drilldown
person user828647    schedule 16.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, перейдите по этой ссылке, чтобы узнать, как реализовать детализацию. Ниже есть ссылка на скрипку, вы можете увидеть ее для справки. В этом случае для соответствующих баров вы указываете значение детализации. Затем в ключе детализации вы можете предоставить данные для графика, который вам нужно показать в этой детализации. Вот пример кода

series: [{
        name: 'Total count',
        color: colors[3],
        data: [{y: first_data[0], drilldown: 'first_drilldown', name: 'first', color: colors[3], display_name: 'First'},
          {y: second_data[0], drilldown: 'second_drilldown', name: 'Second', color: colors[3], display_name: 'Second'}]
      }],
  drilldown: {
        series: [{
          id: 'first_drilldown',
          name: 'fd',
          data: first_data[2]
        },{
          id: 'second_drilldown',
          name: 'sd',
          data: second_data[1]
        }]

Как видите, вы предоставляете drilldown: 'first_drilldown', чтобы показать, какую детализацию следует отображать.

person aash    schedule 16.04.2015
comment
Этот пример дает вам представление о том, как обрабатывать детализацию, если вам нужно загрузить некоторые данные через ajax: jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/ - person user2345998; 16.04.2015
comment
Что вы имеете в виду под аяксом? Я могу выполнять развертку без каких-либо вызовов ajax. Я устанавливаю данные в переменных js при загрузке страницы, а затем использую эти данные для создания графиков. Вызов ajax не задействован - person aash; 16.04.2015
comment
О... скрипка использует ajax. Но все же, если вы загружаете все свои данные изначально, вы можете использовать их при построении графиков. Пожалуйста, посмотрите пример кода, который я предоставил в ответе - person aash; 16.04.2015
comment
Я просто хотел предоставить пример, где вы можете увидеть, как это можно сделать, если вам нужно загрузить данные детализации с сервера (и изначально у вас нет всех данных) - person user2345998; 16.04.2015
comment
@geeky_sh: я понимаю, как реализовать drlldown, мой вопрос в том, как это сделать, используя две мои структуры данных maingraph и childgraph. Было бы неплохо, если бы вы могли привести пример, используя мой пример кода в качестве ссылки. - person user828647; 17.04.2015