Question

我正在尝试将辅助y轴与谷歌图表一起使用。

我有这段代码：

    arrdata.addRows([
        [ObservationDateTime, observationValueCD4, observationValueViralLoad]
    ]);
}
// start of drawchart()

var options2 = {
    title: 'CD4 && ViralLoad v/s DateTime',
    vAxes: [{
        title: 'CD4',
        textStyle: {
            color: 'blue'
        }
    }, // Axis 0
    {
        title: 'Viral Load',
        textStyle: {
            color: 'red'
        }
    } // Axis 1
    ],


    hAxis: {
        title: "Date"
    },


    series: {
        0: {
            type: "bars",
            targetAxisIndex: 0
        },
        1: {
            type: "line",
            targetAxisIndex: 1
        }
    }
};

但是，我对呈现的内容有点困惑：它只是呈现向上的蓝色直线垂直线而没有红线。虽然渲染了次要y轴。

我的期望：我希望左侧y轴的值为蓝色条，右侧y轴的值为红线。

Answer 1

如果没有更多代码或示例数据，我无法确定您的问题是什么，但您的选项似乎正确无误。

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["ObservationDateTime", "observationValueCD4", "observationValueViralLoad"],
        [new Date(2015,1,1), 9, 4],
        [new Date(2015,2,1), 11, 6],
        [new Date(2015,3,1), 20, 2],
        [new Date(2015,4,1), 21, 3]
    ]);


    var options2 = {
        title: 'CD4 && ViralLoad v/s DateTime',
        vAxes: [{
            title: 'CD4',
            textStyle: {
                color: 'blue'
            }
        }, // Axis 0
        {
            title: 'Viral Load',
            textStyle: {
                color: 'red'
            }
        } // Axis 1
        ],
    
    
        hAxis: {
            title: "Date"
        },
    
    
        series: {
            0: {
                type: "bars",
                targetAxisIndex: 0
            },
            1: {
                type: "line",
                targetAxisIndex: 1
            }
        }
    };
    
    var chart = new google.visualization.LineChart(document.getElementById("chart"));
    chart.draw(data, options2);
}

// start of drawchart()

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

辅助y轴值未显示在Google Charts中

1 个答案: