codeigniter 如何在谷歌饼图中添加“%”符号?

cbwuti44  于 2023-06-19  发布在  其他
关注(0)|答案(1)|浏览(129)

我正在尝试在Google饼图切片中添加“%”符号。我已经附上了下面。我使用的是Codeigniter框架。下面的代码创建了一个Google饼图,当点击其中一个切片时,会弹出另一个饼图。辅助饼图显示“s1”、“s2”、“s3”和“s4”的值。我想在切片的值旁边显示“%”符号。请在下面找到代码:

index.php内部代码

<div id="IR-SLA" style="width: 400px; height: 300px;"></div>
<script>
function updateQuery() {
var month = parseInt(document.getElementById('chooseMonth').value);
var year = document.getElementById('chooseYear').value;
updateIncidentsWithinSLA(month, year);
}
function updateIncidentsWithinSLA(month, year) {
var xhrISLA = new XMLHttpRequest();
xhrISLA.onreadystatechange = function() {
if (xhrISLA.readyState === XMLHttpRequest.DONE) {
if (xhrISLA.status === 200) {

// Handle the response from the server
var response = xhrISLA.responseText;
var updatedDataISLA = JSON.parse(response);
drawChartISLA(updatedDataISLA);
} else {

// Handle the error case
console.error('Request failed for incidents logged chart.');
}
}
};

// Send an asynchronous POST request to update the query
xhrISLA.open('POST', '<?php echo base_url(); ? 
>index.php/IndexController/updateQueryISLA', true);

xhrISLA.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrISLA.send('month=' + month + '&year=' + year);
}

<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});

function drawChartISLA(updatedDataISLA) {
// Create the data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'opco_name');
data.addColumn('number', 'count');
data.addColumn('number', 's1_sla_met_count');
data.addColumn('number', 's2_sla_met_count');
data.addColumn('number', 's3_sla_met_count');
data.addColumn('number', 's4_sla_met_count');
data.addRows(updatedDataISLA);
// Set chart options
var options = {
'title': 'Incidents SLA met percentage - ',
'pieSliceText': 'value',
is3D: 'true',
'tooltip': {
trigger: 'none'
}
};

// Instantiate and draw the chart
var chart = new google.visualization.PieChart(document.getElementById('IR-SLA'));
chart.draw(data, options);
// Add event listener for slice selection
google.visualization.events.addListener(chart, 'select', selectHandler);
// Slice selection handler
function selectHandler() {
// Get selected slice data
var selection = chart.getSelection()[0];
if (selection) {
var sliceName = data.getValue(selection.row, 0);
var sliceCount = data.getValue(selection.row, 1);
var sliceS1 = data.getValue(selection.row, 2);
var sliceS2 = data.getValue(selection.row, 3);
var sliceS3 = data.getValue(selection.row, 4);
var sliceS4 = data.getValue(selection.row, 5);
// Create data table for selected slice
var sliceData = new google.visualization.DataTable();
sliceData.addColumn('string', 'Severity');
sliceData.addColumn('number', 'Incident Count');
sliceData.addRow(['S1', sliceS1]);
sliceData.addRow(['S2', sliceS2]);
sliceData.addRow(['S3', sliceS3]);
sliceData.addRow(['S4', sliceS4]);
// Set chart options for selected slice
var sliceOptions = {
'title': sliceName + ' SLA met percentage - ',
pieSliceText: 'value',
'width': 500,
'height': 300,
is3D: 'true',
'tooltip': {
'text': 'value'
}
};
// Open popup window with slice data
var popup = window.open('', 'myPopup', 'width=600,height=400');
popup.document.write('<div style="margin:auto" id="slice_chart_div"></div>');
centerPopup(popup);
// Instantiate and draw the chart for selected slice
var sliceChart = new 
google.visualization.PieChart(popup.document.getElementById('slice_chart_div'));
sliceChart.draw(sliceData, sliceOptions);
}
}

function centerPopup(popup) {
var left = (screen.width - popup.outerWidth) / 2;
var top = (screen.height - popup.outerHeight) / 2;
popup.moveTo(left, top);
}
}
</script>

当单击按钮时调用“updateQuery()”。

以下代码在IndexController.php文件中

public function updateQueryISLA()
{
// Get the posted month and year values
$selected_month = $this->input->post('month') ? $this->input->post('month') : date('n');
$selected_year = $this->input->post('year') ? $this->input->post('year') : date('Y');
// Update the query with the new parameters
$query = $this->db->query("SELECT o.opco_name, s1_incidents_count, s2_incidents_count, 
s3_incidents_count, s4_incidents_count, ((i.s1_sla_met_count + i.s2_sla_met_count + 
i.s3_sla_met_count + i.s4_sla_met_count)/(s1_incidents_count + 
s2_incidents_count+s3_incidents_count+s4_incidents_count))* 100 as count, 
(i.s1_sla_met_count/s1_incidents_count)*100 as s1, 
(i.s2_sla_met_count/s2_incidents_count)*100 as s2, 
(i.s3_sla_met_count/s3_incidents_count)*100 as s3, 
(i.s4_sla_met_count/s4_incidents_count)*100 as s4 FROM opcos_list o inner JOIN 
incidents_summary i ON o.id = i.opcos_list_id WHERE i.month_number = $selected_month AND 
i.year = $selected_year");
$rows = $query->result_array();

// Prepare the data array for the response
$data = [];
foreach ($rows as $row) {
$data[] = [
$row['opco_name'],
(int)$row['count'],
(int)$row['s1'],
(int)$row['s2'],
(int)$row['s3'],
(int)$row['s4'],
];
}

// Return the updated query result as JSON
echo json_encode($data);
}

我尝试使用concate函数在查询中添加“%”。该查询在Mysql工作台中工作,但没有显示在饼图上。请给我一个解决方案。

envsm3lx

envsm3lx1#

为了在饼图切片上显示的值之后添加百分比符号(%),
您需要相应地格式化数据表中的数字。
要做到这一点,你可以使用谷歌的NumberFormat类。
创建饼图的数据表后...

// Create data table for selected slice
var sliceData = new google.visualization.DataTable();
sliceData.addColumn('string', 'Severity');
sliceData.addColumn('number', 'Incident Count');
sliceData.addRow(['S1', sliceS1]);
sliceData.addRow(['S2', sliceS2]);
sliceData.addRow(['S3', sliceS3]);
sliceData.addRow(['S4', sliceS4]);

使用Google的NumberFormat类创建数字格式...

var percentFormat = new google.visualization.NumberFormat({
  fractionDigits: 0,  // number of decimal places to display
  suffix: '%'         // text to display after the number
});

然后使用它来格式化第二列中的数字(index = 1)...

percentFormat.format(sliceData, 1);

在绘制图表之前,请确保按上面所示设置值的格式。
注意:这也将格式化数字显示在工具提示当悬停一个切片.

相关问题