我尝试使用谷歌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));
},
});
}默认的Google饼图是：
<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>那么，我如何通过HTML中的响应来修改arrayToDataTable函数或上面Google饼图data变量的方法，因为我知道上面JavaScript代码的 AJAX 在update_statistics函数中返回？？？
我应该这样做吗：
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条答案
按热度按时间cgyqldqp1#
你可以在更新html标签的同时绘制图表。
首先，加载谷歌图表。
使用
google.charts.load代替$(document).ready谷歌将做同样的事情，等待文档准备就绪。
然后在更新html标记时绘制图表。
请参阅以下示例...