谷歌图表中的栏重叠问题 - 组合图表

Question

我在谷歌图表实施方面遇到了一些问题。根据要求，我应该有双y轴，y轴的条应重叠。我用我的代码实现了以下输出：

注意最后两个栏的两个蓝色箭头。蓝色条隐藏在红色条后面，因为它较小。它应该看起来像这样：

这是我的js文件代码：

var chart, data;

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

function drawChart()
{
    // Create the data table.
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addColumn('number', 'pieces');
    data.addColumn('number', 'ratio');
    data.addColumn('number', 'ratio2');
    data.addRows([
      ['Mushrooms', 300, 200, 50, 1],
      ['Onions', 100, 244, 4, 3],
      ['Olives', 100, 400, 56, 10]
    ]);

    // Set chart options
    options = {
        chartType:"ComboChart",
        containerId:"visualization",
        stackSeries: true,
        isStacked : true,
        seriesDefaults: {

            rendererOptions: {
                barPadding: 0,
                barMargin: 10
            },
            pointLabels: {
                show: true,
                stackedValue: true
            }
        },
        grid: {
            background: '#272424',
            drawGridlines: false
        },
        seriesType: "bars",     
        series: {
                    0: {
                          targetAxisIndex: 0
                      },
                      1: {
                          targetAxisIndex: 1
                      },
                      2: {
                          targetAxisIndex: 1,
                          type: "line"
                      },
                      3: {
                          type: "line"
                      }

                },   
                hAxis:{

                },         
                vAxes: {
                    0: {           
                        title: "Slices",                 
                        label:'Slices',    
                        type:'bars'                        
                    },
                    1: {
                        title: "pieces", 
                        label:'pieces',
                        type:'bars'
                    },
                    2: {
                        title: "ratio,",
                        label:'ratio',
                        type:'line'
                    },
                    3: {
                        title: "ratio2,",
                        label:'ratio2',
                        type:'line'
                    }

                }
        };

    // Instantiate and draw our chart, passing in some options.
    chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'select', selectionHandler);
}

function selectionHandler() {
    var selectedData = chart.getSelection(), row, item;
    if(selectedData != '')
    {
        row = selectedData[0].row;
        item = data.getValue(row,3);
        alert("You selected :" + item);         
    }
}

有谁能建议我怎么能这样做？任何帮助将不胜感激。

Answer 1

您在不同的轴上显示条形图：

                0: {
                      targetAxisIndex: 0
                  },
                  1: {
                      targetAxisIndex: 1
                  },
                  2: {
                      targetAxisIndex: 1,
                      type: "line"
                  },
                  3: {
                      type: "line"
                  }

因此第一个栏位于左侧轴上，第二个栏位于右侧轴上。第一个栏只显示，因为它比它前面的红色条高。这是设计的。如果您希望它们显示堆叠，请将代码更改为：

  0: {
    targetAxisIndex: 0
  },
  1: {
    targetAxisIndex: 0
  },
  2: {
    targetAxisIndex: 1,
    type: "line"
  },
  3: {
    targetAxisIndex: 1,
    type: "line"
  }

这将最终得到：

请注意，您的两个轴不再具有相同的尺寸。根据需要调整其他参数。如果你想要它们并排放置，你可以将它们放在同一个轴上并移除isStacked: true，这将使它们彼此相邻。

^{注意：这种图表非常繁忙，可能不是很好的可视化实践。无论如何，如果您需要创建图表，上述解决方案应该可行。如果你的意思是你想要前面的小条，那么SVG编辑就好了。}

Answer 2

实际上有一种方法可以获得您想要的效果，使用DataView将蓝色数据系列分成两部分。制作一个数据大于红色系列的系列，一个小于或等于红色系列的系列，并将它们（按顺序）大于红色，小于。在系列选项中，将此新系列设置为与第一个系列相同的颜色，并将其隐藏在索引中。

以下是您将使用的DataView：

var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        return (val > dt.getValue(row, 2)) ? val : null;
    }
}, 2, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        return (val <= dt.getValue(row, 2)) ? val : null;
    }
}, 3, 4]);

这是系列选项：

series: {
    0: {
        targetAxisIndex: 0
    },
    1: {
        targetAxisIndex: 1
    },
    2: {
        targetAxisIndex: 0,
        visibleInLegend: false,
        color: '#3366cc' // matches series 0
    },
    3: {
        targetAxisIndex: 1,
        type: "line"
    },
    4: {
        type: "line"
    }
}

使用视图而不是DataTable绘制图表：

chart.draw(view, options);

在此处查看：http://jsfiddle.net/asgallant/4jhC5/