Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/378.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Google图形Y轴的一个值(两个图表的堆叠列)_Javascript_Charts_Google Visualization - Fatal编程技术网

Javascript Google图形Y轴的一个值(两个图表的堆叠列)

Javascript Google图形Y轴的一个值(两个图表的堆叠列),javascript,charts,google-visualization,Javascript,Charts,Google Visualization,完整代码 你可以使用太多的测试 google.load('visualization', '1.1', { 'packages': ['bar'] }); google.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addC

完整代码

你可以使用太多的测试

google.load('visualization', '1.1', {
    'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 500, 1200, 816, 200],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 200, 578],
        ['2004', 197, 536, 613, 500]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },

        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};
输出

问题

我使用谷歌可视化来生成上面的图表

如果您看到上面的屏幕截图,您可以看到上面图表的Y轴在左侧和右侧有两个值。这似乎是因为图表的左侧和右侧栏使用了两个日期范围


我想删除右侧Y轴或打印右侧和左侧Y轴的相同值。我的意思是所有数据都应该在左边的Y轴下。我能做些什么呢?

系列的选项。n.targetAxisIndex创建第二个轴
删除这些选项将允许所有系列默认为第一个轴

但是,在材质条形图中,将系列移动到不同的轴,
将序列分成多个堆栈,从而产生蓝色和红色条
删除上述选项将把所有系列组合成一个蓝色堆栈

为了保持堆叠以两种颜色分开,
必须使用
series.n.targetAxisIndex
,并将显示“双轴”

要保持两轴同步,请使用选项-->
vAxis.viewWindow

这将为两个轴设置相同的范围

vAxis: {
  viewWindow: {
    min: 0,
    max: 1800
  }
}
请参阅以下工作片段

google.charts.load('current'{
套餐:['bar']
}).然后(抽丝);
函数drawStuff(){
var data=new google.visualization.DataTable();
data.addColumn('string','Topping');
data.addColumn('number','Nescafe Instant');
data.addColumn('number','Folgers Instant');
data.addColumn('number','Nescafe bean');
data.addColumn('number','Folgers bean');
data.addRows([
['2001', 500, 1200, 816, 200],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 200, 578],
['2004', 197, 536, 613, 500]
]);
变量选项={
isStacked:是的,
宽度:800,
身高:600,
图表:{
标题:“逐年咖啡消费量”,
副标题:“此数据不真实”
},
系列:{
2: {
目标指数:1
},
3: {
目标指数:1
}
},
言辞:{
视图窗口:{
分:0,,
最高:1800
}
}
};
var chart=new google.charts.Bar(document.getElementById('chart_div');
绘制(数据,google.charts.Bar.convertOptions(选项));
}