javascript - 谷歌图表中的条形重叠问题 - 组合图表

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 编辑好运。}