Highcharts Demo

author(s): Torstein Hønsi

by owen_pengtao

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/item-series.js"></script>

<div id="container"></div>

CSS

#container {
    max-width: 800px;
    min-width: 360px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'item'
    },

    title: {
        text: 'Highcharts item chart'
    },

    subtitle: {
        text: 'Rectangular view'
    },

    legend: {
        labelFormat: '{name} <span style="opacity: 0.4">{y}</span>'
    },

    series: [{
        name: 'Representatives',
        keys: ['name', 'y'],
        data: [
            ['Conservative', 318],
            ['Labour', 262],
            ['Scottish National Party', 35],
            ['Liberal Democrat', 12],
            ['Democratic Unionist Party', 10],
            ['Sinn Fein', 7],
            ['Plaid Cymru', 4],
            ['Green Party', 1],
            ['Others', 1]
        ],
        events: {
      legendItemClick: function() {
        var clickedSeriesName = this.name; // 使用系列的名字作为标识符
        var totalItemsToShow = 0;

        // 遍历所有系列
        this.chart.series.forEach(function(series) {
          series.data.forEach(function(point) {
          	console.log(point);
          });
        });

        console.log("将要显示的项目总数:", totalItemsToShow);
      }
    }
    }]

});