javascript - 如何将值动态传递给图表

Question

我正在构建一个应用程序，它有一个仪表板，其中包含数据的图形表示。这是一个模板。我希望图表上的值是动态的，即我想使用 php 将值传递给图表。

问题是值是在“.js”文件中设置的。如何将值从数据库传递到文件以显示它们？

请帮忙

这是我的html

<!-- Chart Widget -->
                                <div class="widget">
                                    <div class="widget-content border-bottom">
                                        <span class="pull-right text-muted"><?php  echo htmlentities(date("Y")); ?></span>
                                        Last Year's Data
                                    </div>
                                    <div class="widget-content border-bottom themed-background-muted">
                                        <!-- Flot Charts (initialized in js/pages/readyDashboard.js), for more examples you can check out http://www.flotcharts.org/ -->
                                        <div id="chart-classic-dash" style="height: 393px;"></div>
                                    </div>
                                    <!--
                                    <div class="widget-content widget-content-full">
                                        <div class="row text-center">
                                            <div class="col-xs-4 push-inner-top-bottom border-right">
                                                <h3 class="widget-heading"><i class="gi gi-wallet text-dark push-bit"></i> <br><small>$ 41k</small></h3>
                                            </div>
                                            <div class="col-xs-4 push-inner-top-bottom">
                                                <h3 class="widget-heading"><i class="gi gi-cardio text-dark push-bit"></i> <br><small>17k Sales</small></h3>
                                            </div>
                                            <div class="col-xs-4 push-inner-top-bottom border-left">
                                                <h3 class="widget-heading"><i class="gi gi-life_preserver text-dark push-bit"></i> <br><small>3k+ Tickets</small></h3>
                                            </div>
                                        </div>
                                    </div>-->
                                </div>

然后这段代码触发'.js'文件

 <script>$(function(){ ReadyDashboard.init(); });</script>

然后这是 javascript 片段

 var chartClassicDash    = $('#chart-classic-dash');

            // Data for the chart
            var dataEarnings        = [[1,  2300], [2, 2300], [3, 3200], [4, 2500], [5, 4200], [6, 3100], [7, 3600], [8, 2500], [9, 4600], [10, 3700], [11, 4200], [12, 5200]];
            var dataSales           = [[1, 850], [2, 750], [3, 1500], [4, 900], [5, 1500], [6, 1150], [7, 1500], [8, 900], [9, 1800], [10, 1700], [11, 1900], [12, 2550]];
            var dataTickets         = [[1, 130], [2, 330], [3, 220], [4, 350], [5, 150], [6, 275], [7, 280], [8, 380], [9, 120], [10, 330], [11, 190], [12, 410]];

            var dataMonths          = [[1, 'Jan'], [2, 'Feb'], [3, 'Mar'], [4, 'Apr'], [5, 'May'], [6, 'Jun'], [7, 'Jul'], [8, 'Aug'], [9, 'Sep'], [10, 'Oct'], [11, 'Nov'], [12, 'Dec']];

            // Classic Chart
            $.plot(chartClassicDash,
                [
                    {
                        label: 'Sales',
                        data: dataEarnings,
                        lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
                        points: {show: true, radius: 5}
                    },
                    {
                        label: 'Deposits',
                        data: dataSales,
                        lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
                        points: {show: true, radius: 5}
                    },
                    {
                        label: 'Withdrawal',
                        data: dataTickets,
                        lines: {show: true, fill: true, fillColor: {colors: [{opacity: .6}, {opacity: .6}]}},
                        points: {show: true, radius: 5}
                    }
                ],
                {
                 colors: ['#5ccdde', '#454e59', '#ffffff'],
                        //colors: ['#5ccdde', '#deb25c', '#de815c'],

                    legend: {show: true, position: 'nw', backgroundOpacity: 0},
                    grid: {borderWidth: 0, hoverable: true, clickable: true},
                    yaxis: {show: false, tickColor: '#f5f5f5', ticks: 3},
                    xaxis: {ticks: dataMonths, tickColor: '#f9f9f9'}
                }
            );

我想动态控制这些值

// Data for the chart
            var dataEarnings        = [[1,  2300], [2, 2300], [3, 3200], [4, 2500], [5, 4200], [6, 3100], [7, 3600], [8, 2500], [9, 4600], [10, 3700], [11, 4200], [12, 5200]];
            var dataSales           = [[1, 850], [2, 750], [3, 1500], [4, 900], [5, 1500], [6, 1150], [7, 1500], [8, 900], [9, 1800], [10, 1700], [11, 1900], [12, 2550]];
            var dataTickets         = [[1, 130], [2, 330], [3, 220], [4, 350], [5, 150], [6, 275], [7, 280], [8, 380], [9, 120], [10, 330], [11, 190], [12, 410]];

再次感谢

Answer 1

请发布您的代码，这很容易帮助您，并且通过 php 将值传递给 javascript 变量也很简单，下面是我将动态数据从数据库传递到条形图的示例代码。不完整代码供大家引用

<script type="text/javascript">      
google.charts.setOnLoadCallback(drawChart);
imagepath_comparison="";
function drawChart() {
var data = google.visualization.arrayToDataTable([<?=$data;?>]);
var options = {
title: 'GRAPH ANALYSIS',
vAxis: {title: "SUBJECTS"},
hAxis: {
title: "MARKS"

}
};

</script>