在同一页面MVC上绘制相同的谷歌图表

时间:2017-10-24 13:55:00

标签: model-view-controller

您好,我正在尝试在同一页面上显示相同的Google图表。这是我目前的代码

<script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

    // Bar chart
    google.charts.load('current', { packages: ['corechart', 'bar'] });
    google.charts.setOnLoadCallback(Mygraph);


    function Mygraph() {

        $.ajax({
            async: false,
            url: "GetGraph",
            dataType: "json",
            success: function (jsonData) {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Question');
                data.addColumn('number', 'My Perfomance');
                data.addColumn('number', 'Peers Performance');

                for (var i = 0; i < jsonData.length; i++) {
                    data.addRow([jsonData[i].rateName, jsonData[i].myRate, jsonData[i].peerRate]);
                }

                var view = new google.visualization.DataView(data);
                view.setColumns([0, 1,
                                 {
                                     calc: "stringify",
                                     sourceColumn: 1,
                                     type: "string",
                                     role: "interval",


                                 },
                                 2, {
                                     calc: "stringify",
                                     sourceColumn: 2,
                                     type: "string",
                                     role: "interval"
                                 }]);
                var options = {
                    title: '',
                    chartArea: { width: '50%' },
                    backgroundColor: '#ffffff ',

                    hAxis: {
                        title: 'Rating',
                        minValue: 0,
                        textStyle: {
                            bold: true,
                            fontSize: 12,
                            color: '#4d4d4d'



                        },
                        titleTextStyle: {
                            bold: true,
                            fontSize: 18,
                            color: '#4d4d4d'
                        }
                    },
                    vAxis: {
                        title: 'Performance',
                        textStyle: {
                            fontSize: 14,
                            bold: true,
                            color: '#848484'
                        },
                        titleTextStyle: {
                            fontSize: 14,
                            bold: true,
                            color: '#848484'
                        }
                    }
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
                chart.draw(view, options);
            }
        });


    }
</script>

问题是如何两次显示相同的图表。目前该图表仅显示一次。我希望它显示两次。我正在使用Google图表api请帮忙。期待您的回音。谢谢你的帮助

0 个答案:

没有答案