数据更改时饼图数据不更新
Pie Chart data is not updating when data is changed
我正在尝试生成我的项目的报告。这些报告在饼图的帮助下显示。我得到了正确的响应数据,但饼图没有在第一次请求中更新。我必须再发送 2-3 个请求,然后它才会更新饼图。
我的js代码在这里:
//Pie chart for product
var dataLeadproduct = google.visualization.arrayToDataTable(pieproductdataLeadSummery);
var productLeadoptions = {
title: 'Top Product',
pieHole: 0,
pieSliceText: '',
pieSliceBorderColor: '#00ffffff',
colors: ['#FF772D', '#57c8f2', '#8175c7', '#ff6c60', '#A9D86E'],
chartArea: {left: 20, top: 10, width: '100%', height: '75%'},
is3D: false,
reverseCategories: false,
'tooltip.text': 'value'
};
var productLeadSummery = new google.visualization.PieChart(document.getElementById('leadsummeryproduct_piechart'));
productLeadSummery.draw(dataLeadproduct, productLeadoptions);
CI的控制器代码:
//Product Pie Chart
$leadProduct_query = 'SELECT COUNT(lead_product_id) AS lead_product_count, lead_product_id FROM leads WHERE lead_id IN (' . implode(',', $leadsID) . ') AND lead_location_id ="' . $leadsummery_city . '" AND lead_progress LIKE \'%:"' . $leadsummery_stages . '";%\' AND lead_loan_amount >="' . $leadsummery_amount_from . '" AND lead_loan_amount <="' . $leadsummery_amount_to . '" AND lead_reg_date <="' . $leadsummery_startdate . '" AND lead_reg_date >="' . $leadsummery_enddate . '" GROUP BY lead_product_id ORDER BY COUNT(lead_product_id) DESC limit 5';
$leadProduct = $this->db->query($leadProduct_query)->result_array();
$leadProduct_count = count($leadProduct);
foreach ($leadProduct as $lp) {
$product_name[] = $this->Generalmodel->getfromid('products', 'product_name', $lp['lead_product_id']);
$pro_percent[] = round(($lp['lead_product_count'] / $leads_count) * 100);
}
$tempLeadPro[] = array('Product Name', 'Count');
for ($i = 0; $i < $leadProduct_count; $i++) {
$proData = array($product_name[$i], $pro_percent[$i]);
$tempLeadPro[] = $proData;
$leadSummeryProductpiedata = $tempLeadPro;
}
问题已解决。原因是 google.charts.setOnLoadCallback(drawLeadSummeryChart);
。
因为我在同一个 jquery 中多次使用 setOnLoadCallback
。
因此,它总是在控制台 "Uncaught Error: Container is not defined"
中显示错误并且无法加载响应。所以我只是检查视图页面中的 id 长度是否大于 0。如果它大于则执行 setOnLoadCallback
。代码如下:
if ($('#IDFROMVIEWPAGE').length > 0) {
google.charts.setOnLoadCallback(drawLeadSummeryChart);
}
我正在尝试生成我的项目的报告。这些报告在饼图的帮助下显示。我得到了正确的响应数据,但饼图没有在第一次请求中更新。我必须再发送 2-3 个请求,然后它才会更新饼图。 我的js代码在这里:
//Pie chart for product
var dataLeadproduct = google.visualization.arrayToDataTable(pieproductdataLeadSummery);
var productLeadoptions = {
title: 'Top Product',
pieHole: 0,
pieSliceText: '',
pieSliceBorderColor: '#00ffffff',
colors: ['#FF772D', '#57c8f2', '#8175c7', '#ff6c60', '#A9D86E'],
chartArea: {left: 20, top: 10, width: '100%', height: '75%'},
is3D: false,
reverseCategories: false,
'tooltip.text': 'value'
};
var productLeadSummery = new google.visualization.PieChart(document.getElementById('leadsummeryproduct_piechart'));
productLeadSummery.draw(dataLeadproduct, productLeadoptions);
CI的控制器代码:
//Product Pie Chart
$leadProduct_query = 'SELECT COUNT(lead_product_id) AS lead_product_count, lead_product_id FROM leads WHERE lead_id IN (' . implode(',', $leadsID) . ') AND lead_location_id ="' . $leadsummery_city . '" AND lead_progress LIKE \'%:"' . $leadsummery_stages . '";%\' AND lead_loan_amount >="' . $leadsummery_amount_from . '" AND lead_loan_amount <="' . $leadsummery_amount_to . '" AND lead_reg_date <="' . $leadsummery_startdate . '" AND lead_reg_date >="' . $leadsummery_enddate . '" GROUP BY lead_product_id ORDER BY COUNT(lead_product_id) DESC limit 5';
$leadProduct = $this->db->query($leadProduct_query)->result_array();
$leadProduct_count = count($leadProduct);
foreach ($leadProduct as $lp) {
$product_name[] = $this->Generalmodel->getfromid('products', 'product_name', $lp['lead_product_id']);
$pro_percent[] = round(($lp['lead_product_count'] / $leads_count) * 100);
}
$tempLeadPro[] = array('Product Name', 'Count');
for ($i = 0; $i < $leadProduct_count; $i++) {
$proData = array($product_name[$i], $pro_percent[$i]);
$tempLeadPro[] = $proData;
$leadSummeryProductpiedata = $tempLeadPro;
}
问题已解决。原因是 google.charts.setOnLoadCallback(drawLeadSummeryChart);
。
因为我在同一个 jquery 中多次使用 setOnLoadCallback
。
因此,它总是在控制台 "Uncaught Error: Container is not defined"
中显示错误并且无法加载响应。所以我只是检查视图页面中的 id 长度是否大于 0。如果它大于则执行 setOnLoadCallback
。代码如下:
if ($('#IDFROMVIEWPAGE').length > 0) {
google.charts.setOnLoadCallback(drawLeadSummeryChart);
}