简体   繁体   中英

Google Charts: Scaling each series in line chart

I have a line chart with multiple series on it:

  • X axis is time
  • Y axis has speed and vehicle RPM

Speed is in the range -20 to 130 while RPM is in the range 0 to 8000. I'd like to have both of these series scaled separately, so that I can clearly see the trends of both. 速度,rpm vs时间

My draw function looks something like this:

var do_chart = function (readings) {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Time');
    var fields_using = $('#select-y').val(); 
    // fields are selected from a select dropdown
    _.forEach(fields_using, function(v) {
        data.addColumn('number', v);
    });
    _.forEach(readings, function (v) {
        var row = [new Date(v.timestamp)];
        _.forEach(fields_using, function(f) {
            row.push(v[f]);
        });
        data.addRow(row);
    });
    var options = {
        title: 'Speed vs. Time',
        curveType: 'function',
        animation:{
            duration: 100,
            startup: true
        },
        explorer: {
            actions: ['dragToZoom', 'rightClickToReset'],
            axis: 'horizontal',
            keepInBounds: true,
            maxZoomIn: 0
        },
        legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    chart.draw(data, options);
}

What you could do is have dual y-axes. You can look at the Google Charts documentation where it talks about it. This way you can preserve the values, as you won't need to scale them.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM