2

ハイチャートオプションに追加しようとしているjsonオブジェクトがあります。

API 経由でオブジェクトを受信し、それをハイチャート関数に渡すことはできますが、データを周囲の静的データに追加することはできません。

        var datas;
        datas = getData();
        //getdata();

        alert('2datass'+datas);
        console.log(datas);
        createChart(datas);


        function createChart(data){

            alert('createChart'+data); // works - outputs createChart[object Object][object Object][object Object][object Object][object Object]
            var dynamicData;


                    for(var i =0;i <= data.length-1;i++)
                    {
                        var item = data[i];

                        dynamicData = dynamicData + {
                            type: 'column',
                            name: item.name,
                            data: [item.difference]
                        };

                    }

            alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]



            var series = [data /*This is where my data should sit*/,{
                    type: 'column',
                    name: 'Jane',
                    data: [300, 30]
                }, {
                    type: 'column',
                    name: 'John',
                    data: [-200, 50]
                }, {
                    type: 'column',
                    name: 'Joe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jobe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jooe',
                    data: [444, -25]
                },{
                    type: 'column',
                    name: 'Jane',
                    data: [300, 30]
                }
                , {
                    type: 'pie',
                    name: 'Total consumption',
                    data: [{
                            name: 'Jane',
                            y: 13
                            //color: '#4572A7' // Jane's color
                        }, {
                            name: 'John',
                            y: 23
                            //color: '#AA4643' // John's color
                        }, {
                            name: 'Joe',
                            y: 19
                            //color: '#89A54E' // Joe's color
                        }],
                    center: [30, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                }];




            var options = {
                chart: {
                    renderTo: 'container'
                },
                title: {
                    text: 'Account Managers Leaderboard'
                },
                xAxis: {
                    categories: ['Month on Month', 'Day on Day']
                },
                tooltip: {
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' sales';
                        } else {
                            s = ''+
                                this.x  +': '+ this.y;
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Total proportion of sales <br />this month',
                            style: {
                                left: '40px',
                                top: '-5px',
                                color: 'black'
                            }
                        }]
                },
                series: series
            };

            $(document).ready(function() {
                var chart;
                chart = new Highcharts.Chart(options);
            });

        }



       function getData(){
            //alert('ajax');

            var receivedData; // store your value here
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "API URL",
                async: false,
                success: function(data){
                    alert('data'+data); //works
                    receivedData = data;
                }
            }); 

            return receivedData;
        };

動的データが追加されていないため、私の解決策は間違っているようです。どんな助けでも大歓迎です。

更新されたコード:

 var dynamicData = {
                    type: 'column',
                    name: 'FIRST',
                    data: [300, 30]
                };

            //Without the following loop, my chart will display the above entry "FIRST"
            //With the loop, the chart omits everything in dynamicData
                    for(var i =0;i <= data.length-1;i++)
                    {
                        var item = data[i];

                        dynamicData = dynamicData + {
                            type: 'column',
                            name: item.name,
                            data: [item.difference]
                        };

                    }

            alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]


                //dynamicData should be 'FIRST' and then 5 other returned rows
            var series = [dynamicData, {
                    type: 'column',
                    name: 'John',
                    data: [-200, 50]
                }, {
                    type: 'column',
                    name: 'Joe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jobe',
                    data: [444, -25]
                }, {
                    type: 'column',
                    name: 'Jooe',
                    data: [444, -25]
                },{
                    type: 'column',
                    name: 'Jane',
                    data: [300, 30]
                }
                , {
                    type: 'pie',
                    name: 'Total consumption',
                    data: [{
                            name: 'Jane',
                            y: 13
                            //color: '#4572A7' // Jane's color
                        }, {
                            name: 'John',
                            y: 23
                            //color: '#AA4643' // John's color
                        }, {
                            name: 'Joe',
                            y: 19
                            //color: '#89A54E' // Joe's color
                        }],
                    center: [30, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                }];

.push を使用した修正コード:

                // series has been moved straight into the options variable
                var options = {
                chart: {
                    renderTo: 'container'
                },
                title: {
                    text: 'Account Managers Leaderboard'
                },
                xAxis: {
                    categories: ['Month on Month', 'Day on Day']
                },
                tooltip: {
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' sales';
                        } else {
                            s = ''+
                                this.x  +': '+ this.y;
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Total proportion of sales <br />this month',
                            style: {
                                left: '40px',
                                top: '-5px',
                                color: 'black'
                            }
                        }]
                },
                series: [{
                        type: 'pie',
                        name: 'Total consumption',
                        data: [{
                                name: 'Jane',
                                y: 13
                                //color: '#4572A7' // Jane's color
                            }, {
                                name: 'John',
                                y: 23
                                //color: '#AA4643' // John's color
                            }, {
                                name: 'Joe',
                                y: 19
                                //color: '#89A54E' // Joe's color
                            }],
                        center: [30, 80],
                        size: 100,
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
            };


            //I can now push data straight to seriese (although item.difference doesn't       
            // work .. perhaps because it's an array)

            for(var i =0;i <= data.length-1;i++)
            {
                var item = data[i];

                options.series.push({
                    "type": "column",
                    "name": item.name,
                    "data": item.data
                });
                alert('datavalue' +item.data);       
            }


               $(document).ready(function() {
                var chart;
                chart = new Highcharts.Chart(options);
            });

答え!

これはトリックを行うようです。私と一緒に苦労してくれた Speransky Danil に感謝します。

        var datas;
        datas = getData();
        createChart(datas);


        function createChart(data){

            var options = {
                chart: {
                    renderTo: 'container'
                },
                title: {
                    text: 'Account Managers Leaderboard'
                },
                xAxis: {
                    categories: ['Month on Month', 'Day on Day']
                },
                tooltip: {
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' sales';
                        } else {
                            s = ''+
                                this.x  +': '+ this.y;
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Total proportion of sales <br />this month',
                            style: {
                                left: '40px',
                                top: '-5px',
                                color: 'black'
                            }
                        }]
                },
                series: [{
                        type: 'pie',
                        name: 'Total consumption',
                        data: [{
                                name: 'Jane',
                                y: 13
                                //color: '#4572A7' // Jane's color
                            }, {
                                name: 'John',
                                y: 23
                                //color: '#AA4643' // John's color
                            }, {
                                name: 'Joe',
                                y: 19
                                //color: '#89A54E' // Joe's color
                            }],
                        center: [30, 80],
                        size: 100,
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
            };




            for(var i =0;i <= data.length-1;i++)
            {
                var item = data[i];

                options.series.push({
                    "type": "column",
                    "name": item.name,
                    "data": [item.data]
                });

            }



















            $(document).ready(function() {
                var chart;
                chart = new Highcharts.Chart(options);
            });

        }



        function getData(){
            //alert('ajax');

            var receivedData; // store your value here
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "API URL",
                async: false,
                success: function(data){
                    alert('data'+data); //works
                    receivedData = data;
                }
            }); 

            return receivedData;
        };
4

2 に答える 2

3

問題は、以下を含むループにあります。

dynamicData = dynamicData + {
   type: 'column',
   name: item.name,
   data: [item.difference]
};

初めてdynamicDataですundefined。合計undefinedObject、それらの両方を に変換しstringて連結すると、 string が得られ'undefined'[object Object]'オブジェクトは'undefined[object Object][object Object]'変換されますstring'[object Object]'

于 2012-07-30T11:30:51.393 に答える
2

これはトリックを行うようです。私と一緒に苦労してくれた Speransky Danil に感謝します。

        var datas;
        datas = getData();
        createChart(datas);


        function createChart(data){

            var options = {
                chart: {
                    renderTo: 'container'
                },
                title: {
                    text: 'Account Managers Leaderboard'
                },
                xAxis: {
                    categories: ['Month on Month', 'Day on Day']
                },
                tooltip: {
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' sales';
                        } else {
                            s = ''+
                                this.x  +': '+ this.y;
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Total proportion of sales <br />this month',
                            style: {
                                left: '40px',
                                top: '-5px',
                                color: 'black'
                            }
                        }]
                },
                series: [{
                        type: 'pie',
                        name: 'Total consumption',
                        data: [{
                                name: 'Jane',
                                y: 13
                                //color: '#4572A7' // Jane's color
                            }, {
                                name: 'John',
                                y: 23
                                //color: '#AA4643' // John's color
                            }, {
                                name: 'Joe',
                                y: 19
                                //color: '#89A54E' // Joe's color
                            }],
                        center: [30, 80],
                        size: 100,
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
            };




            for(var i =0;i <= data.length-1;i++)
            {
                var item = data[i];

                options.series.push({
                    "type": "column",
                    "name": item.name,
                    "data": [item.data]
                });

            }



















            $(document).ready(function() {
                var chart;
                chart = new Highcharts.Chart(options);
            });

        }



        function getData(){
            //alert('ajax');

            var receivedData; // store your value here
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "http://a-website.com/apiv1/summery/get/authKey/1/range/day/",
                async: false,
                success: function(data){
                    alert('data'+data); //works
                    receivedData = data;
                }
            }); 

            return receivedData;
        };
于 2012-07-31T17:18:43.690 に答える