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

Я использую этот пример: http://www.highcharts.com/demo/column-drilldown чтобы создать высокую диаграмму детализации. Пожалуйста, дайте мне знать, как создать детализацию с высокой диаграммы, получая данные из таблицы?

Ниже мой текущий код:

<!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Highcharts Example</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/data.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js"></script>
            <script type="text/javascript">
    $(function () {
        Highcharts.setOptions({
            colors: ['#009933', '#FF9933', '#FF0000']
        });
        $('#containerHighcharts').highcharts({
            data: {
                table: 'datatable'
            },
            chart: {
                type: 'column'
            },
            title: {
                text: 'Data extracted from a HTML table in the page'
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: 'Number of Indicators'
                }
            },


            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
                shared: true
            },
             plotOptions: {
                column: {
                    stacking: 'normal'
                }
            }
        });
    });
            </script>
        </head>
        <body>

            <div id="containerHighcharts" style="width: 500px; height: 400px; margin: 0 auto"></div>
            <table id="datatable">
                <thead>
                    <tr>
                        <th></th>
                        <th>A</th>
                        <th>B</th>
                        <th>C</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Test1</th>
                        <td>3</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <th>Test2</th>
                        <td>3</td>
                        <td>2</td>
                        <td>4</td>
                    </tr>
                    <tr>
                       <th>Test3</th>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>
Источник

1 ответ

То, что вам нужно, это просто базовая развертка http://jsfiddle.net/Paulson/b49hkzuh/1/

 $(function () {
     Highcharts.setOptions({
            colors: ['#009933', '#FF9933', '#FF0000']
        });
     $('#containerHighcharts').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Tests data'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

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

        series: [{
            name: 'Tests',
            colorByPoint: true,
            data: [{
                name: 'Test1',
                y: 3,
                drilldown: 'Test1'
            }, {
                name: 'Test2',
                y: 9,
                drilldown: 'Test2'
            }, {
                name: 'Test3',
                y: 9,
                drilldown: 'Test3'
            }]
        }],
        drilldown: {
            series: [{
                id: 'Test1',
                colorByPoint: true,
                data: [
                    ['A', 3],
                    ['B', 0],
                    ['C', 0]
                ]
            }, {
                id: 'Test2',
                colorByPoint: true,
                data: [
                    ['A', 3],
                    ['B', 2],
                    ['C', 4]
                ]
            }, {
                id: 'Test3',
                colorByPoint: true,
                data: [
                    ['A', 3],
                    ['B', 5],
                    ['C', 1]
                ]
            }]
        }
     });
 });

Я сомневаюсь, что вы можете просто использовать данные из таблицы для создания детализации. Вы определенно можете анализировать таблицы и создавать объекты для рядов и параметров развертки по JS.

Источник
Другие вопросы по тегам