2

我在使用谷歌图表实现时遇到了一点问题。根据要求，我应该有双 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);         
    }
}

谁能建议我该怎么做？任何帮助，将不胜感激。

4

2 回答 2

2

您在单独的轴上显示您的条形图：

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

于 2013-09-26T08:36:18.833 回答
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/

于 2013-09-26T14:19:48.603 回答