2017-02-01 2 views
1

Я застрял в высоких диаграммах, чтобы создать диаграммы детализации с диаграммой столбцов на первом уровне и Fixed placement columns на втором уровне. Я googled и получил образец, который обратный моему требованию. Fiddle LinkКак получить первый уровень в качестве столбчатой ​​диаграммы и второго уровня как столбцы фиксированного размещения в развернутых высоких диаграммах

Так пример кода следующим образом

$(function() { 
// Create the chart 
Highcharts.chart('container', { 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Browser market shares. January, 2015 to May, 2015' 
    }, 
    subtitle: { 
     text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 
    yAxis: { 
     title: { 
      text: 'Total percent market share' 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     column: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       format: '{point.y:.1f}%' 
      }, 
      grouping: 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: [{ 
     name: 'Brands',    
     data: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 56.33, 
      drilldown: 'Microsoft Internet Explorer' 
     }, { 
      name: 'Chrome', 
      y: 24.03, 
      drilldown: 'Chrome' 
     }, { 
      name: 'Firefox', 
      y: 10.38, 
      drilldown: 'Firefox' 
     }] 
    }, { 
     name: 'Brands2', 
     pointPadding: 0.2, 
     data: [{ 
      name: 'Microsoft Internet Explorer', 
      y: 24.77, 
      drilldown: 'Safari' 
     }, { 
      name: 'Chrome', 
      y: 20.91, 
      drilldown: 'Opera' 
     }, { 
      name: 'Firefox', 
      y: 7.2, 
      drilldown: null 
     }] 
    }], 
    drilldown: { 
     series: [{ 
      name: 'Microsoft Internet Explorer', 
      id: 'Microsoft Internet Explorer', 
      data: [ 
       [ 
        'v11.0', 
        24.13 
       ], 
       [ 
        'v8.0', 
        17.2 
       ], 
       [ 
        'v9.0', 
        8.11 
       ], 
       [ 
        'v10.0', 
        5.33 
       ], 
       [ 
        'v6.0', 
        1.06 
       ], 
       [ 
        'v7.0', 
        0.5 
       ] 
      ] 
     }, { 
      name: 'Chrome', 
      id: 'Chrome', 
      data: [ 
       [ 
        'v40.0', 
        5 
       ], 
       [ 
        'v41.0', 
        4.32 
       ], 
       [ 
        'v42.0', 
        3.68 
       ], 
       [ 
        'v39.0', 
        2.96 
       ], 
       [ 
        'v36.0', 
        2.53 
       ], 
       [ 
        'v43.0', 
        1.45 
       ], 
       [ 
        'v31.0', 
        1.24 
       ], 
       [ 
        'v35.0', 
        0.85 
       ], 
       [ 
        'v38.0', 
        0.6 
       ], 
       [ 
        'v32.0', 
        0.55 
       ], 
       [ 
        'v37.0', 
        0.38 
       ], 
       [ 
        'v33.0', 
        0.19 
       ], 
       [ 
        'v34.0', 
        0.14 
       ], 
       [ 
        'v30.0', 
        0.14 
       ] 
      ] 
     }, { 
      name: 'Firefox', 
      id: 'Firefox', 
      data: [ 
       [ 
        'v35', 
        2.76 
       ], 
       [ 
        'v36', 
        2.32 
       ], 
       [ 
        'v37', 
        2.31 
       ], 
       [ 
        'v34', 
        1.27 
       ], 
       [ 
        'v38', 
        1.02 
       ], 
       [ 
        'v31', 
        0.33 
       ], 
       [ 
        'v33', 
        0.22 
       ], 
       [ 
        'v32', 
        0.15 
       ] 
      ] 
     }, { 
      name: 'Safari', 
      id: 'Safari', 
      data: [ 
       [ 
        'v8.0', 
        2.56 
       ], 
       [ 
        'v7.1', 
        0.77 
       ], 
       [ 
        'v5.1', 
        0.42 
       ], 
       [ 
        'v5.0', 
        0.3 
       ], 
       [ 
        'v6.1', 
        0.29 
       ], 
       [ 
        'v7.0', 
        0.26 
       ], 
       [ 
        'v6.2', 
        0.17 
       ] 
      ] 
     }, { 
      name: 'Opera', 
      id: 'Opera', 
      data: [ 
       [ 
        'v12.x', 
        0.34 
       ], 
       [ 
        'v28', 
        0.24 
       ], 
       [ 
        'v27', 
        0.17 
       ], 
       [ 
        'v29', 
        0.16 
       ] 
      ] 
     }] 
    } 
}); 
}); 

Как иметь обратный детализацию указанного выше существующего кода

+0

Я не понимаю, чего вы хотите. Объясните, что вы подразумеваете под «обратным сверлением». Когда вы нажимаете «____», вы хотите «____» произойти? – jlbriggs

+0

@jlbriggs, как создавать диаграммы детализации с диаграммой столбцов на первом уровне и столбцами фиксированного размещения на втором уровне –

+0

диаграммы детализации имеют идентификатор серии, связанный с сечением развертки. но моя проблема заключается в том, как заполнять столбцы фиксированного размещения на втором уровне –

ответ

2

С помощью входов из jlbriggs, я могу решить мою проблему

Fiddle Link

Итак, код ниже. Надеюсь, это поможет сообществу

$(function() { 
    // Create the chart 
    $('#container').highcharts({ 
    chart: { 
     type: 'column', 
     events: { 
     drilldown: function(e) { 
      var chart = this, 
      drilldowns = chart.userOptions.drilldown.series, 
      series = []; 
      e.preventDefault(); 
      Highcharts.each(drilldowns, function(p, i) { 
      if (p.id.includes(e.point.name)) { 
       chart.addSingleSeriesAsDrilldown(e.point, p); 
      } 
      }); 
      chart.applyDrilldown(); 
     } 
     } 
    }, 
    title: { 
     text: 'Browser market shares. January, 2015 to May, 2015' 
    }, 
    subtitle: { 
     text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 
    yAxis: [{ 
     title: { 
     text: 'Total percent market share' 
     } 

    }, { 
     title: { 
     text: 'cost' 
     }, 
     opposite: true 
    }], 
    legend: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
     borderWidth: 0, 
     dataLabels: { 
      enabled: true, 
      format: '{point.y:.1f}%' 
     } 
     } 
     ,column: { 
       grouping: false, 
       shadow: false, 
       borderWidth: 0 
      } 
    }, 

    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: 'Brands', 
     colorByPoint: true, 
     data: [{ 
     name: 'Microsoft Internet Explorer', 
     y: 56.33, 
     drilldown: 'Microsoft Internet Explorer' 
     }, { 
     name: 'Chrome', 
     y: 24.03, 
     drilldown: 'Chrome' 
     }, { 
     name: 'Firefox', 
     y: 10.38, 
     drilldown: 'Firefox' 
     }, { 
     name: 'Safari', 
     y: 4.77, 
     drilldown: 'Safari' 
     }, { 
     name: 'Opera', 
     y: 0.91, 
     drilldown: 'Opera' 
     }, { 
     name: 'Proprietary or Undetectable', 
     y: 0.2, 
     drilldown: null 
     }] 
    }], 
    drilldown: { 
     series: [{ 
     name: 'Microsoft Internet Explorer', 
     id: 'Microsoft Internet Explorer', 
     type: 'column', 
     color: 'rgba(165,170,217,1)', 
     pointPadding: 0.3, 
     pointPlacement: -0.2, 
     data: [ 
      ['v11', 25], 
      ['v8', 17], 
      ['v9', 8], 
      ['v10', 5], 
      ['v7', 3] 
     ] 
     }, { 
     name: 'Microsoft Internet Explorer Cost', 
     id: 'Microsoft Internet Explorer', 
     type: 'column', 
     color: 'rgba(126,86,134,.9)', 
     pointPadding: 0.4, 
     pointPlacement: -0.2, 
     yAxis: 1, 
     data: [ 
      ['v11', 50], 
      ['v8', 40], 
      ['v9', 60], 
      ['v10', 65], 
      ['v7', 73] 
     ] 
     }, { 
     name: 'Chrome', 
     id: 'Chrome', 
     data: [ 
      ['v40.0', 5], 
      ['v41.0', 4.32], 
      ['v42.0', 3.68] 
     ] 
     }] 
    } 
    }); 
}); 

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

  • Нет связанных вопросов^_^