javascript - Google Charts - 将 ChartRangeFilter 结束范围设置为新数据后的最大值

Question

我有一个持续将温度数据附加到折线图的应用程序。当新数据附加到图表时，它不会显示，因为 ChartRangeFilter 的最大范围不包括它，即使它在更新之前位于最右边。为了显示新数据，您必须手动调整范围过滤器以使其包含添加项。

我试图找到解决这个问题的方法，但到目前为止还没有成功。出于某种原因，我无法在 drawChart 函数之外调用我的 chart1 实例的方法。 (见下面的代码)

这个问题的一个非常重要的标准是，如果它在更新之前已经在最右边，它应该只调整自己到最右边。

这是相关的 Javascript 代码:

google.load('visualization', '1', {'packages':['corechart', 'controls', 'linechart']});
google.setOnLoadCallback(drawChart);

var chart1;
function drawChart() 
{
    // Create the dataset (DataTable)
    data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Temperature');

    // Create a dashboard.
    dash_container = document.getElementById('dashboard'),
    dashboard = new google.visualization.Dashboard(dash_container);

    for (var i = 0; i < all_history.length; i ++)
    {
        var obj = all_history[i];
        data.addRow([new Date(obj.time.value), obj.temperature.value]);
    }

    chart1 = new google.visualization.ChartWrapper(
    {
            chartType : 'LineChart',
            containerId : 'chart1',
            legend: { position: 'bottom' },
            vAxis: 
            {
                maxValue: 40,
                minValue: 10
            }
    });

    // Initial range limits
    var start = new Date(new Date().setTime(new Date().getTime() - 300000));
    var end = new Date();

    control1 = new google.visualization.ControlWrapper(
    {
            controlType: 'ChartRangeFilter',
            containerId: 'control1',
            options: 
        {
                filterColumnLabel: 'Date'
            },
        ui:
        {
            //snapToData: true
        },
        state: 
        {
                range: 
                {
                        start: start,
                        end: end
                }
            }
    });

    dashboard.bind(control1, chart1);

    dashboard.draw(data);
}

function addToChart(chart, item)
{
    data.addRow(item);
    dashboard.draw(data);
    return;
    // code below this is full of bugs


    resize = false;

    //chart1.clearChart(); 
    //console.log(chart1.getHAxisValue(400));
    //console.log(chart1.getXLocation(400));
    // ALL OF THE ABOVE CALLS THROWS AN ERROR -> WHY?

    if (control1.getState().range.end == chart1.hAxis.maxValue)
    {
        resize = true;
    }


    if (resize)
    {
        control1.setState({start: control1.getState().range.start, end:      chart1.hAxis.maxValue})
    }
}

Answer 1

need to wait for the 'ready' event 之前调用图表、控件或仪表板上的方法

例如

google.visualization.events.addListener(chart, 'ready', addToChart);