Question

我遇到过这种情况，我在项目中使用了谷歌图表。代码如下所示

    <html>
<head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Scripts/jquery.gchart.js"></script>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.js"></script>
    <script type="text/javascript">

            // Load the Visualization API and the piechart package.
            google.load('visualization', '1.0', { 'packages': ['corechart'] });

            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawCharts);

            // Callback that creates and populates a data table,
            // instantiates the pie chart, passes in the data and
            // draws it.

            function drawCharts() {

                // Create the data table.
                var dataB = google.visualization.arrayToDataTable([
              ['Chronic Disease', 'Number Of Patients'],
              ['Diabetes', 200],
              ['Hypertension', 84],
              ['Hypercholestrolemia', 76],
              ['Obesity', 48]
                ]);



                // Set chart options
                var optionsB = {
                    title: 'Identified Chronic Population',
                    vAxis: { title: 'Chronic Disease', titleTextStyle: { color: 'red' } }
                };



                // Instantiate and draw our chart, passing in some options.
                var chartB = new google.visualization.BarChart(document.getElementById('chart_div'));
                chartB.draw(dataB, optionsB);

            }
    </script>
</head>

我在html中有一些复选框

<select id="problems" style="text-align: right">
                <option value="diabetes">DIABETES</option>
                <option value="hypertension">HYPERTENSION</option>
                <option value="hypercholestrolemia">HYPERCHOLESTROLEMIA</option>
                <option value="obesity">OBESITY</option>
            </select>

我想显示与选中复选框对应的栏。搜索了SO和互联网，但没有得到任何有用的信息。任何形式的帮助将不胜感激。

Answer 1

您需要向<select>添加一个事件监听器，该监听器将过滤数据并在选择选项时重绘图表。您需要在图表代码中添加以下内容：

var select = document.querySelector('#problems');
function filterAndDraw (e) {
    if (select.selectedIndex >= 0) {
        var value = select.options[select.selectedIndex].value;
        var view = new google.visualization.DataView(dataB);
        view.setRows(dataB.getFilteredRows([{column: 0, value: value}]));
        chartB.draw(view, optionsB);
    }
    else {
        chartB.draw(dataB, optionsB);
    }
}
if (document.addEventListener) {
    select.addEventListener('change', filterAndDraw);
}
else if (document.attachEvent) {
    select.attachEvent('onchange', filterAndDraw);
}
else {
    select.onchange = filterAndDraw;
}

要使过滤工作，您必须将<option>元素中值的大小写与DataTable中的值匹配：

<select id="problems" style="text-align: right">
    <option value="Diabetes">DIABETES</option>
    <option value="Hypertension">HYPERTENSION</option>
    <option value="Hypercholestrolemia">HYPERCHOLESTROLEMIA</option>
    <option value="Obesity">OBESITY</option>
</select>

请参阅此处的示例：http://jsfiddle.net/asgallant/y5ZVJ/

但是，使用下拉列表过滤图表的方法更简单：您可以使用CategoryFilter。请在此处根据您的图表查看示例：http://jsfiddle.net/asgallant/y5ZVJ/2/

Answer 2

您可以使用jquery功能。喜欢

$('select option:selected').drawchart(){
//code for the relevant chart.
}

如何在选中复选框时显示条形图？

2 个答案: