堆棧內存溢出
  簡體   English   中英

如何將 HTML 數據（標簽）作為值包含在 Google 餅圖的“arrayToDataTable”中？

[英]How to include HTML data (tags) as value in "arrayToDataTable" of Google Pie Chart?

 原文  2022-11-17 14:11:40  0   1    javascript/ php/ charts/ google-visualization/ google-pie-chart

問題描述

我正在嘗試將 Google PieChart ( https://developers.google.com/chart/interactive/docs/gallery/piechart ) 與 PHP (Laravel) 和 HTML 標簽以及 JavaScript 一起使用，其代碼如下：

$(document).ready(function() {
    if ($('#dashboard_date_filter').length == 1) {
        dateRangeSettings.startDate = moment();
        dateRangeSettings.endDate = moment();
        $('#dashboard_date_filter').daterangepicker(dateRangeSettings, function(start, end) {
            $('#dashboard_date_filter span').html(
                start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
            );
            update_statistics(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
            if ($('#quotation_table').length && $('#dashboard_location').length) {
                quotation_datatable.ajax.reload();
            }
        });

        update_statistics(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
    }

    $('#dashboard_location').change( function(e) {
        var start = $('#dashboard_date_filter')
                    .data('daterangepicker')
                    .startDate.format('YYYY-MM-DD');

        var end = $('#dashboard_date_filter')
                    .data('daterangepicker')
                    .endDate.format('YYYY-MM-DD');

        update_statistics(start, end);
    });
});

function update_statistics(start, end) {
    var location_id = '';
    if ($('#dashboard_location').length > 0) {
        location_id = $('#dashboard_location').val();
    }
    var data = { start: start, end: end, location_id: location_id };
    //get purchase details
    var loader = '<i class="fas fa-sync fa-spin fa-fw margin-bottom"></i>';
    $('.total_purchase').html(loader);
    $('.purchase_due').html(loader);
    $('.total_sell').html(loader);
    $('.invoice_due').html(loader);
    $('.total_expense').html(loader);
    $('.total_purchase_return').html(loader);
    $('.total_sell_return').html(loader);
    $('.net').html(loader);
    $.ajax({
        method: 'get',
        url: '/home/get-totals',
        dataType: 'json',
        data: data,
        success: function(data) {
            //purchase details
            $('.total_purchase').html(__currency_trans_from_en(data.total_purchase, true));
            $('.purchase_due').html(__currency_trans_from_en(data.purchase_due, true));

            //sell details
            $('.total_sell').html(__currency_trans_from_en(data.total_sell, true));
            $('.invoice_due').html(__currency_trans_from_en(data.invoice_due, true));
            //expense details
            $('.total_expense').html(__currency_trans_from_en(data.total_expense, true));

            $('.total_purchase_return').html(__currency_trans_from_en(data.total_purchase_return, true));
            $('.total_sell_return').html(__currency_trans_from_en(data.total_sell_return, true));
            $('.net').html(__currency_trans_from_en(data.net, true));
        },
    });
}

默認的谷歌餅圖是：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

那么，如果知道我上面的 JavaScript 代碼的 AJAX 在update_statistics函數中返回，我該如何通過 HTML 中的響應修改上面 Google Pie Chart data變量的arrayToDataTable函數或方法？？？

我應該這樣做嗎：

function drawChart() {
   var data = google.visualization.arrayToDataTable([
              [{{ __('home.purchase_due') }}, <span class="info-box-number purchase_due"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>],
              [{{ __('lang_v1.expense') }},     <span class="info-box-number total_expense"><i class="fas fa-sync fa-spin fa-fw margin-bottom"></i></span>]
   ]);

？？？

請幫助我將數據__('home.purchase_due') }}和{{ __('lang_v1.expense') }}分別嵌入餅圖中的 HTML 值（標簽： span ）。

1 個解決方案

解決方案1
 0  2022-12-15 17:19:22

您可以在更新 html 標簽的同時繪制圖表。

首先，加載谷歌圖表...
使用google.charts.load而不是$(document).ready
谷歌會做同樣的事情並等待文檔准備好。

然后在更新 html 標簽時繪制圖表。

看下面的例子...

google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
    if ($('#dashboard_date_filter').length == 1) {
        dateRangeSettings.startDate = moment();
        dateRangeSettings.endDate = moment();
        $('#dashboard_date_filter').daterangepicker(dateRangeSettings, function(start, end) {
            $('#dashboard_date_filter span').html(
                start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
            );
            update_statistics(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
            if ($('#quotation_table').length && $('#dashboard_location').length) {
                quotation_datatable.ajax.reload();
            }
        });

        update_statistics(moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
    }

    $('#dashboard_location').change( function(e) {
        var start = $('#dashboard_date_filter')
                    .data('daterangepicker')
                    .startDate.format('YYYY-MM-DD');

        var end = $('#dashboard_date_filter')
                    .data('daterangepicker')
                    .endDate.format('YYYY-MM-DD');

        update_statistics(start, end);
    });
});

function update_statistics(start, end) {
    var location_id = '';
    if ($('#dashboard_location').length > 0) {
        location_id = $('#dashboard_location').val();
    }
    var data = { start: start, end: end, location_id: location_id };
    //get purchase details
    var loader = '<i class="fas fa-sync fa-spin fa-fw margin-bottom"></i>';
    $('.total_purchase').html(loader);
    $('.purchase_due').html(loader);
    $('.total_sell').html(loader);
    $('.invoice_due').html(loader);
    $('.total_expense').html(loader);
    $('.total_purchase_return').html(loader);
    $('.total_sell_return').html(loader);
    $('.net').html(loader);
    $.ajax({
        method: 'get',
        url: '/home/get-totals',
        dataType: 'json',
        data: data,
        success: function(data) {
            //purchase details
            $('.total_purchase').html(__currency_trans_from_en(data.total_purchase, true));
            $('.purchase_due').html(__currency_trans_from_en(data.purchase_due, true));

            //sell details
            $('.total_sell').html(__currency_trans_from_en(data.total_sell, true));
            $('.invoice_due').html(__currency_trans_from_en(data.invoice_due, true));

            //expense details
            $('.total_expense').html(__currency_trans_from_en(data.total_expense, true));

            $('.total_purchase_return').html(__currency_trans_from_en(data.total_purchase_return, true));
            $('.total_sell_return').html(__currency_trans_from_en(data.total_sell_return, true));
            $('.net').html(__currency_trans_from_en(data.net, true));

            var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              ['Work', data.purchase_due],  // not sure which data you want to use but use same variables from above
              ['Eat',  data.total_expense]
            ]);

            var options = {
              title: 'My Daily Activities',
              pieHole: 0.4,
            };

            // make sure this exists somewhere on the page --> <div id="donutchart"></div>
            var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(data, options);
        },
    });
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在“Google Chart”arrayToDataTable上添加html標簽中的數據？ 使用javascript Google Chart - arrayToDataTable 不是數組錯誤 如何在Google圖表中使用arraytodatatable使用類別過濾器 如何將 Jquery 數據獲取到谷歌餅圖？ 如何更改谷歌餅圖中的文本“無數據” 如何將動態數據加載到谷歌餅圖？ Google餅圖單一值 為Google餅圖創建數據 Google圖表：無法獲取屬性“ arrayToDataTable” 如何將JSON字符串分配給Google餅圖數據變量
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM