Вставить данные в jquery highcharts не удалось - PullRequest
Новая
       37

Вставить данные в jquery highcharts не удалось

0 голосов
/ 24 октября 2011

Я хотел бы поместить данные из таблицы в круговую диаграмму старших диаграмм.

Таблица будет загружена сначала, затем внизу перед закрытием тела, я буду захватывать данные в верхние графики для отображения.

Я пытался, но просто не работал, что-то не так, связанное с синтаксисом, я верю ... 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript" src="../../includes/js/highcharts/highcharts.js"></script>       
<script type="text/javascript" src="../../includes/js/highcharts/modules/exporting.js"></script>    
</head>

<body>

bla bla bla

bla bla bla

bla bla bla


<table class="dataTbl">
<tbody>
<tr><td>fruit</td><td>qty</td></tr>
<tr><td>apple</td><td>1</td></tr>
<tr><td>banana</td><td>5</td></tr>
<tr><td>durian</td><td>3</td></tr>
</tbody>
</table>

//to load pie chart at the last, data obtain from table

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


<script type="text/javascript">


var chart;

$(document).ready(function() {


        chart = new Highcharts.Chart({
                chart: {
                        renderTo: 'container',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                },
                title: {
                        text: 'Top fruits'
                },
                tooltip: {
                        formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                },
                plotOptions: {
                        pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                        enabled: true,
                                        color: '#000000',
                                        connectorColor: '#000000',
                                        formatter: function() {
                                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                                        }
                                }
                        }
                },

                series: [{
                            type: 'pie',
                            name: 'Browser share',
                            data: [
                                    ['Firefox',   45.0],
                                    ['IE',       26.8],
                                    ['Chrome', 12.8],
                                    ['Safari',    8.5],
                                    ['Opera',     6.2],
                                    ['Others',   0.7]
                            ]
                    }]

                //default series data sample given by highchart, how to override this?

        });



        $(".dataTbl > tbody > tr").each(function (index) {
            if (index != 0) {
                var chartnumbervalue = parseInt($(this).find("td:first").next('td').text());
                var charttextvalue = jQuery.trim($(this).find("td:first").text());

                //chart.series[0].data.push([charttextvalue, chartnumbervalue]);

                //i want to push the data into series: data: but fail...
            }
        });



});

</script>

</body>

1 Ответ

1 голос
/ 24 октября 2011

Я придумал решение и поместил его в jsfiddle здесь: http://jsfiddle.net/CAKQH/21189/

Итак, главное, что вы должны понять, это то, что «секция» ряда реальной диаграммы - это массив объектов, которыеможет принимать несколько разных форм.Вы можете прочитать больше об этом здесь: http://www.highcharts.com/ref/#series

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

var piechartinfo = {
                            type: 'pie',
                            name: 'Custom Info',
                            data: []
                    }

Я оставил массив данных пустым, потому что ваш цикл jquery заполнит его впоследствии. 

            //chart.series[0].data.push([charttextvalue, chartnumbervalue]);

            piechartinfo.data.push([charttextvalue, chartnumbervalue]);

Затем, когда создается экземпляр фактического графика, я добавляю вобъект piechartinfo 

series: [piechartinfo]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...