javascript - Google 图表中的双 y 轴

Question

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

在一个 y 轴上，我需要 BMI 值，在其他 体重 值上。

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

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

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

现在，要按照 GoogleCharts 网站上的示例，在一个 y 轴上获得 BMI 观测值，在另一轴上获得 Weight 观测值，我需要将它们作为列。

但我只将它们作为同一列的不同值，称为 ReadingType。有可能解决方法吗？

它应该是这样的:

Answer 1

不幸的是，您必须将数据处理成它可以理解的格式。 DataTable类提供了许多用于填充的方法，但这里有一个示例:

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);
}

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