Question

当我尝试为饼图插入数字范围过滤器

时出现错误

一个或多个参与者未能绘制（）列标签无效：百分比

How it look likes and there's no error message in the console

我试图让它看起来与https://developers.google.com/chart/interactive/docs/gallery/controls中提供的示例完全相同，只是数据有所不同。示例中使用的数据是硬编码的，而我使用的数据是使用PHP直接从MySQL获得的。

这是我的PHP代码。

<?php
$con=mysqli_connect("localhost","root","password") or die("Failed to connect with database");
mysqli_select_db($con, "tutor");

$sql="SELECT * 
FROM googlechart";

$result = mysqli_query($con,$sql) or die(mysqli_error($con));

$rows = array();
$flag = true;

$table = array();
$table['cols'] = array(
    array('label' => 'Topics', 'type' => 'string'),
    array('label' => 'Percentage', 'type' => 'number')

);

$rows = array();
while($r = mysqli_fetch_assoc($result)) {
    $temp = array();
    $temp[] = array('v' => (string) $r['weekly_task']);
    $temp[] = array('v' => (int) $r['percentage']);
    $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;
$jsonTable = json_encode($table);
?>

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script type="text/javascript">

        google.charts.load('current', {'packages':['corechart', 'controls']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {

            var data = new google.visualization.DataTable(<?=$jsonTable?>);

            var dashboard = new google.visualization.Dashboard(
                document.getElementById('dashboard_div'));

            var donutRangeSlider = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'filter_div',
                'options': {
                    'filterColumnLabel': 'percentage'
                }
            });

            var pieChart = new google.visualization.ChartWrapper({
                'chartType': 'PieChart',
                'containerId': 'chart_div',
                'options': {
                    'width': 300,
                    'height': 300,
                    'pieSliceText': 'value',
                    'legend': 'right'
                }
            });
            dashboard.bind(donutRangeSlider, pieChart);
            dashboard.draw(data);
        }
    </script>
</head>

<body>
<div id="dashboard_div">
    <div id="filter_div"></div>
    <div id="chart_div"></div>
</div>
</body>

请指教。提前谢谢。

Answer 1

问题在于donutRangeSlider的filterColumnLabel。

var donutRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
                'filterColumnLabel': 'percentage'
            }
        });

不应将其命名为＆＃39;百分比＆＃39;而应该是＆＃39; 百分比 ＆＃39;如下面的PHP代码列标签。

$table['cols'] = array(
array('label' => 'Topics', 'type' => 'string'),
array('label' => 'Percentage', 'type' => 'number')
);

解决方案：

var donutRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
                'filterColumnLabel': 'Percentage'
            }
        });

一个或多个参与者无法绘制（），无效的列标签

1 个答案: