Question

我一直试图弄清楚如何使Google Line Chart动态。我在控制台上遇到错误：

未捕获错误：不是数组

   function pensionDawChart( DataPoints ){
        console.log( [$.trim(DataPoints)] );
        var data = google.visualization.arrayToDataTable( $.trim(DataPoints) );
        var options = {
            title: 'Pension',
            curveType: 'function',
            legend: { position: 'bottom' }
        };
        var chart = new google.visualization.LineChart(document.getElementById('pension-calculator-chartContainer'));
        chart.draw(data, options);
    }

//Plot the chart
function pension_chart(){
    var ageAtRetirement  = 29;
    var GeneralDataPoints, inflatedClosing, DataPoints;
    years = $('#retirement-inputs #years-to-retirement').val();
    DataPoints = [];
    for (year = 1; year <= years; year++){
        inflatedClosing = parseInt($('#lookup-table-preserved #row-' + year + ' .inflated-closing').text());
        GaInflatedClosing = parseInt($('#lookup-table-preserved #row-' + year + ' .ga-inflated-closing').text());
        DataPoints.push([year, inflatedClosing, GaInflatedClosing] + ',');
    }
    google.charts.setOnLoadCallback( pensionDawChart(DataPoints) );
}

控制台日志 这是DataPoints上的转储

["1,10994,5248,,2,13988,6498,,3,16983,7747,,4,19977,…,,27,88848,37911,,28,91842,39174,,29,94837,40437,"]0: "1,10994,5248,,2,13988,6498,,3,16983,7747,,4,19977,8996,,5,22971,10247,,6,25966,11499,,7,28961,12752,,8,31956,14005,,9,34950,15258,,10,37944,16512,,11,40939,17767,,12,43933,19022,,13,46928,20277,,14,49922,21534,,15,52916,22791,,16,55910,24048,,17,58905,25306,,18,61899,26564....

Answer 1

这是工作代码，我使用websocket html5更新图表

$scope.drawGraph= function() {

            var i = 0;
            var data = new google.visualization.DataTable();
            var chart = new google.visualization.LineChart(document
                    .getElementById('container3'));

            data.addColumn('datetime', 'Date');
            data.addColumn('number', 'dataaa');
            data.addColumn({
                type : 'string',
                role : 'tooltip'
            });
            data.addColumn({
                label : 'Style',
                type : 'string',
                role : 'style'
            });

    //You can add timer event here   
        webSocket.onmessage = function(event) {
                var point = JSON.parse(event.data);
                if (point.length > 1) {
                    $scope.Contribution = point;
                }

                var currentDate = new Date();
                var dateValue = parseInt(currentDate.getTime());
                var year = new Date(dateValue).getFullYear();
                var month = (new Date(dateValue).getMonth());
                var day = new Date(dateValue).getDate();
                var hours = new Date(dateValue).getHours();
                var minutes = new Date(dateValue).getMinutes();
                var seconds = new Date(dateValue).getSeconds();

                    data.addRow([
                            new Date(year, month, day, hours, minutes,
                                    seconds), (parseFloat(point.anomaly)),
                            (parseFloat(point.anomaly)).toString(),
                            'color: #5E92FF;stroke-color: #FF0000',
                            parseFloat(point.predictive) ]);


                var options = {
                    title : "title",
                    titlePosition : 'left',
                    width : '70%',
                    height : '30%',
                    titleTextStyle : {
                        color : 'white'
                    },
                    legend : {
                        'position' : 'right',
                        textStyle : {
                            color : 'white'
                        }

                    },
                    curveType : 'function',
                    backgroundColor : {
                        fill : 'transparent'
                    },
                    'chartArea' : {
                        'width' : '75%',
                        'height' : '65%',
                        'left' : '10%'
                    },
                    colors : [ '#0080FF', 'gold' ],

                    tooltip : {
                        isHtml : true
                    },
                    vAxis : {
                        textStyle : {
                            color : 'white'
                        }

                    },
                    is3D : true,

                    hAxis : {
                        textStyle : {
                            color : 'white'
                        },
                        format : 'hh:mm:ss',
                        viewWindow : {
                            min : new Date(year, month, day, hours,
                                    minutes, seconds - 100),
                            max : new Date(year, month, day, hours,
                                    minutes, seconds)
                        }
                    },

                }
                chart.draw(data, options);


        }

Answer 2

要获得预期结果，请使用DataPoints [0] .split

将数据拆分为字符串

DataPoints[0].split(",")

如何使Google Link Chart动态化

2 个答案: