我正在通过mysqli从数据库中提取数据以创建Google饼图。数据来自一栏(a1),但每个条目都不相同(例如a,b,c),我列出了每个条目/答案的响应百分比。 例如 a = 20% b = 30%
每个条目对应一个不同的社交媒体类型,我需要显示该类型,但不会在数据库本身中显示。有没有一种方法可以更改图表的图例,以代替使用自定义标签代替列表A,B,C? (例如,不要显示“ A”显示“ Facebook”)。
我尝试在var数据下使用title,在选项下使用label,在选项下使用图例。我觉得我想念什么
<?php
$connect = mysqli_connect("localhost", "root", "root", "survey");
$query = "SELECT a1, count(*) as number FROM rtp2k GROUP BY a1";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Sad me is Sad </title>
<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([
['social', 'number'],
<?php
while($row = mysqli_fetch_array($result))
{
echo "['".$row["a1"]."', ".$row["number"]."],";
}
?>
]);
var options = {
title: 'Which social networks do you use most often?',
//is3D:true,
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<br /><br />
<div style="width:900px;">
<h3 align="center">Make Simple Pie Chart by Google Chart API with PHP Mysql</h3>
<br />
<div id="piechart" style="width: 900px; height: 500px;">
</div>
</div>
</body>
</html>
现在,我的图例按数据库中的内容列出了类型(例如,a,b,c)。我想用自己的标签/标题替换字母(例如,我可以用“ a”代替“ a”)喜欢说“ Facebook”。
答案 0 :(得分:0)
为保持一致性而编辑。
我们可以在计算列中使用DataView
,
将值转换为网络名称。
首先,创建一个对象以将值映射到名称。
var socialNetworks = {
a: 'Facebook',
b: 'Instagram',
c: 'LinkedIn'
};
然后我们从DataView
创建一个DataTable
。
var view = new google.visualization.DataView(data);
然后使用方法setColumns
添加用于转换的计算列。
我们使用数字的列索引,因为它不会改变。
view.setColumns([{
calc: function (dt, row) {
return socialNetworks[data.getValue(row, 0)];
},
label: 'social',
type: 'string'
}, 1]);
然后使用DataView
绘制图表。
chart.draw(view, options);
完整摘要...
var data = google.visualization.arrayToDataTable([
['social', 'number'],
<?php
while($row = mysqli_fetch_array($result))
{
echo "['".$row["a1"]."', ".$row["number"]."],";
}
?>
]);
var options = {
title: 'Which social networks do you use most often?',
//is3D:true,
pieHole: 0.4,
};
var socialNetworks = {
a: 'Facebook',
b: 'Instagram',
c: 'LinkedIn'
};
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
return socialNetworks[data.getValue(row, 0)];
},
label: 'social',
type: 'string'
}, 1]);
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(view, options);