Question

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

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

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

以下是相关的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 在chart，control或dashboard

上调用方法之前

e.g。

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

Google图表 - 将ChartRangeFilter结束范围设置为最大值，以跟踪新数据

1 个答案: