Highcharts zur Darstellung in einer HTML-Tabelle

Question

Ich erstelle gerade ein System, das verschiedene Arten von Graphen erzeugt. Ich möchte ein Diagramm und eine Tabelle erstellen, bei denen, wenn ein Diagramm DRILLDOWNED ist, die Tabelle ebenfalls synchronisiert wird. Gibt es eine Möglichkeit, die aktuellen Daten von HighCharts an JSON auszugeben? Dann wird dieser JSON in eine Datentabelle eingegeben? Vielen Dank!

Answer 1

Kontrolle dieses JsFiddle Demo

Sie können die id von e.seriesOptions.id erhalten, die der Schlüssel für Ihre Daten. Dann können Sie diese ID als Schlüssel verwenden, um geeignete Daten zu erhalten und Ihre Datentabelle innerhalb der Ereignisse drillUp und drillDown zu aktualisieren.

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

JS

$(function() { 
    // Create the chart 
    $('#container').highcharts({ 
    chart: { 
     type: 'column', 
     events: { 
     drillup: function(e) { 
      //alert('drill Up'); 
      console.log(this); 
      console.log(e.seriesOptions.id); 

      console.log(this.options.series[0].name); 
      console.log(this.options.series[0].data[0].name); 
     }, 
     drilldown: function(e) { 
      //alert('drill Down'); 
      console.log(this); 
      console.log(e.seriesOptions.id); 

      console.log(this.options.series[0].name); 
      console.log(this.options.series[0].data[0].name); 
     } 
     } 
    }, 
    title: { 
     text: 'DrillUp button styling' 
    }, 
    xAxis: { 
     type: 'category' 
    }, 

    legend: { 
     enabled: false 
    }, 

    plotOptions: { 
     series: { 
     borderWidth: 0, 
     dataLabels: { 
      enabled: true, 
     } 
     } 
    }, 

    series: [{ 
     name: 'Things', 
     colorByPoint: true, 
     data: [{ 
     name: 'Dieren', 
     y: 5, 
     drilldown: 'animals' 
     }, { 
     name: 'Fruit', 
     y: 2, 
     drilldown: 'fruits' 
     }, { 
     name: "Auto's", 
     y: 4 
     }] 
    }], 
    drilldown: { 
     drillUpButton: { 
     relativeTo: 'spacingBox', 
     position: { 
      y: 0, 
      x: 0 
     }, 
     theme: { 
      fill: 'white', 
      'stroke-width': 1, 
      stroke: 'silver', 
      r: 0, 
      states: { 
      hover: { 
       fill: '#bada55' 
      }, 
      select: { 
       stroke: '#039', 
       fill: '#bada55' 
      } 
      } 
     } 

     }, 
     series: [{ 
     id: 'animals', 
     data: [ 
      ['Katten', 4], 
      ['Honden', 2], 
      ['Koeien', 1], 
      ['Schapen', 2], 
      ['Varkens', 1] 
     ] 
     }, { 
     id: 'fruits', 
     data: [ 
      ['Appels', 4], 
      ['Sinaasappels', 2] 
     ] 
     }] 
    } 
    }) 
});