2016-03-30 16 views
0

Merhaba HighChart paketini kullanmak ve 1. Delme aşağı seviyesinde birden fazla seriyi aynı anda gösterme özelliği ile JS figürleri yapmak istiyorum.
2. Bu serilerdeki farklı birimleri delinmiş seviyeden göstermek için çoklu (say 2) y eksenini kullanın. kodunun başlangıç ​​noktası dayanarakEşzamanlı çoklu seri ve y eksenine Highchart drilldown

üç js kaynak kodu ile

$(function() { 
// Create the chart 
$('#container').highcharts({ 
    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: { 
     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: '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', 
      categories: ['v11','v8','v9','v10','v7'], 
      type: 'spline', 
      data: [ 
        ['v11',25], 
        ['v8',17], 
       ['v9',8], 
       ['v10',5], 
       ['v7',3]] 
     }, { 
      name: 'Chrome', 
      id: 'Chrome', 
      data: [ 
       ['v40.0',5], 
       ['v41.0',4.32], 
       ['v42.0',3.68] 
      ] 
     }] 
    } 
}); 
}); 

http://jsfiddle.net/h5xjp8h5/2/

:

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/data.js"></script> 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 

ancak aşağıdaki gibi Keşfi parçası kod yaparken:

drilldown: { 
     series: [{ 
       name: 'Microsoft Internet Explorer', 
      id: 'Microsoft Internet Explorer', 
      type: 'spline', 
      data: [ 
        ['v11',25], 
        ['v8',17], 
       ['v9',8], 
       ['v10',5], 
       ['v7',3]] 
     }, { 
       name: 'Microsoft Internet Explorer Cost', 
      id: 'Microsoft Internet Explorer', 
      type: 'spline', 
      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] 
      ] 
     }] 
    } 
y ekseni parçası ile

:

yAxis: [{ 
     title: { 
      text: 'Total percent market share' 
     } 

    }, 
        { 
     title: { 
       text: 'cost' 
     }, 
      opposite: true 
    }], 

http://jsfiddle.net/h5xjp8h5/3/

O çalışmadı.

Birisi bana şu konuda yardımcı olabilir:
1) Microsoft Internet'te detaylandırmayı istiyorum İki tane spline serisiyle, biri sürüm kullanımıyla, diğeri ise sürüm maliyetiyle keşfedin.
2) İki y eksenini kullanarak bu iki dizinin
3) olmasını istiyorum.

Çok önceden şimdiden teşekkür ederiz. senin Keşfi gibi yeni dizisi ekleyebilir için

cevap

1

Sen drilldown olay geri arama işlevini kullanabilirsiniz:

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(); 
    } 

Sen benzer addSingleSeriesAsDrilldown(), yöntem kullanabilirsiniz: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown

Ama Keşfi gibi birden dizi ekleyebilir bu yöntemle.

http://jsfiddle.net/h5xjp8h5/10/

Saygılarımla:

Burada bunun nasıl çalıştığını bir örnek görebilirsiniz.

+0

Tam olarak ne sevdiğim gibi çalıştığından çok teşekkürler! – yuteng