Question

我正在尝试在GoogleCharts中创建可以修改图表“view”属性的按钮。

这是我的头脑：

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

    function drawChart() {

        //New chart, with a specific 'view'
        var chart = new google.visualization.ChartWrapper({
            'chartType': 'ColumnChart',
            'containerId': 'chart_div',
            'options': {
                'width': 640,
                'height': 480
            },
            'view': {'columns': [0, 1]} 
        });

        //Data used to fill the chart, i don't think there's an issue here
        ...
        //There's 3 columns of data

        //Assign data to the chart and draw it
        chart.setDataTable(data);
        chart.draw();
    }
</script>

在身体中我使用链接到按钮的以下功能：

<script type="text/javascript">
    function changeVisualisation() {
        chart.setView({'columns': [0, 2]});
        chart.draw();
    }
</script>

但是我收到以下错误：

“categoryfilter.html：54未捕获的ReferenceError：图表未定义”

我在伪造什么？

Answer 1

你的问题与范围有关。

在Javascript中，当你在一个函数中声明一个变量时，你不能在这个函数之外的范围之外使用它。

检查一下：

<script>
var a = "foo";

function newScope() {
    // can access 'a'
    console.log(a) // "foo"

    var b = "bar";
} // outside this function, no one knows 'b'
</script>

little schema (not by me !)

这就是您的错误消息为chart is not defined的原因，因为您尝试在范围之外使用它。

编辑：没有那么多时间，抱歉。您可以阅读：http://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

使用按钮与GoogleCharts中的图表进行互动

1 个答案: