具有两个Y轴的Google图表的Y轴值

Question

我已经尝试了很多让谷歌图表看起来像这样，

使用此代码，

new google.visualization.ColumnChart(document.getElementById('onlineUsers_chart')).
            draw(dataTable, {
                isStacked: true,
                vAxes: {
                    0: { 'minValue': 3050 },
                    1: { 'minValue': 2 }
                },
                series: {
                    0: { targetAxisIndex: 0, type: "line" },
                    1: { targetAxisIndex: 1 },
                    2: { targetAxisIndex: 1 },
                    3: { targetAxisIndex: 1 }
                },
                options: {
                    legend: {
                        position: 'bottom'
                    },
                    colors: ['#3366CC', '#DC3912', '#A6A6A6', '#3366CC'],
                    pointSize: 3,
                    chartArea: {
                        left: 60,
                        top: 20,
                        bottom: 60,
                        width: "100%",
                        height: "1000px"
                    }
                }
            }
        );

这就是我得到的，

我无法找到将第一个Y轴的最小值设为3050的方法。 并且颜色选项和图例位置选项无法正常工作。我应该使用不同的图表类型而不是ColumnChart吗？

Answer 1

我能够解决问题。

使用viewWindow.min选项设置Y轴值 如果没有“选项”说明，所有选项都可以正常工作。属性。 是的，我将图表类型更改为ComboChart。

这是代码

new google.visualization.ComboChart(document.getElementById('onlineUsers_chart')).
        draw(dataTable, {
            isStacked: true,
            vAxes: {
                0: { viewWindow: { min: 3050 } },
                1: { viewWindow: { min: -60 }}
            },
            series: {
                0: { targetAxisIndex: 0, type: "line" },
                1: { targetAxisIndex: 1, type: "bars" },
                2: { targetAxisIndex: 1, type: "bars" },
                3: { targetAxisIndex: 1, type: "bars" }
            },
           // options: {
                legend: {
                    position: 'bottom'
                },
                colors: ['#3366CC', '#DC3912', '#A6A6A6', '#3366CC'],
                pointSize: 3,
                chartArea: {
                    left: 60,
                    top: 20,
                    bottom: 60,
                    width: "100%",
                    height: "1000px"
                }
            //}
        }
    );