Google图表中的双y轴

Question

我正在尝试将双y轴与Google图表结合使用。我了解基础知识及其工作原理。

在y轴上，我想要BMI个值和其他Weight值。

我从SQL数据库中取出数据。但是，BMI和Weight本身就是名为ReadingName的列中的值。 所以，如果我使用查询，

select * from table where ReadingName = 'BMI' or ReadingName = Weight

我得到了序列化为JSON的结果集，然后转发到渲染图表，再次使用列名称检索这些图表。

现在，要在一个yaxis上设置BMI的观察值，在其他设备上设置Weight，根据GoogleCharts网站上的示例，我需要将它们作为列。

但是我只将它们作为同一列的不同值ReadingType。是否可以解决这个问题？

这应该是这样的：

Answer 1

不幸的是，您必须按照它理解的格式按摩数据。 DataTable类提供了许多填充方法，但这是一个例子：

＆＃13;

＆＃13;

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

function drawChart() {
    // Start with long data
    var rawData = [
        [new Date(2014, 8, 1), "Weight", 140],
        [new Date(2014, 8, 1), "BMI", 5],
        [new Date(2014, 8, 15), "Weight", 130],
        [new Date(2014, 8, 15), "BMI", 4],
        
        [new Date(2014, 9, 1), "Weight", 120],
        [new Date(2014, 9, 1), "BMI", 3],
        [new Date(2014, 9, 15), "Weight", 120],
        [new Date(2014, 9, 15), "BMI", 3]
    ];
    
    // Create a wide table from the long data
    var data = new google.visualization.DataTable();
    data.addColumn("date", "Date");
    data.addColumn("number", "BMI");
    data.addColumn("number", "Weight");
    
    
    var lastDate = null;
    var currentRow = null;
    for (var i=0; i < rawData.length; i++) {
        var date=rawData[i][0];
        var col=rawData[i][1];
        var value=rawData[i][2];
        
        if (lastDate == null) {
            // First pass
            currentRow = [date, null, null];            
        }
        else if (lastDate != date) {
            data.addRow(currentRow);
            currentRow = [date, null, null];      
        }
        
        if (col=="BMI") currentRow[1] = value;
        else if (col=="Weight") currentRow[2] = value;
        
        
        lastDate = date;
    }
    
    if (currentRow != null) data.addRow(currentRow);
    
    

    var options = {

        title: 'Wight & BMI',
        vAxes: [{
            title: "Weight",
            minValue: 0
        }, {
            title: "BMI",
            minValue: 0
        }],
        series: {
            0: { targetAxisIndex:0 },    
            1: { targetAxisIndex:1 }
        },
        interpolateNulls: true
    }


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

＆＃13;

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>

＆＃13;

＆＃13;

＆＃13;