Google可视化-带有组合图的仪表板（气泡和线）

Question

我正在创建一个带有气泡图的仪表盘，比较从今年到去年的考试成绩。 x轴是2012年平均百分分数（从0到100），y轴是2013年平均百分分数（也从0到100）。 我正在尝试显示此情节的性能变化，因此，如果一所学校的学生在2012年测试中得分达到50％，在2013年测试中得分达到60％，这将代表学校的发展。 同样，如果一所学校的学生去年的平均成绩为第50个百分位，但今年的平均水平为第42个百分位，则该学校的学生人数会下降（相对于参考群体）。 气泡的大小与学生人数成正比。 y = x线描述的学校其2013年百分分数与其2012年分数相符，并且与去年的表现相同。 因此，从视觉上看，中心线在此线上方的气泡显示增长，线以下的气泡显示下降，线条上的气泡显示停滞。

如果我的用户看到行y = x [这是从（0,0）到（100,100）的行]，则容易得多。 这样，他们可以轻松地看到线条上方，上方或下方的气泡。 如果线不存在，那么除非他们知道要点，否则很难看到增长/下降。

是否可以在气泡图上覆盖y = x线？ 如果是这样，怎么办？ 我已经尝试过进行ComboChart，但是没有成功。 谢谢。

这就是我试图绘制组合图的方式：

    var table = new google.visualization.ChartWrapper({
        chartType: 'ComboChart',
        containerId: 'table_div',
        options: {
            height: 800,
            width: 800,
            bubble: {opacity: 0.2, stroke: 'transparent'},
            hAxis: {minValue: 0, maxValue: 100},
            vAxis: {minValue: 0, maxValue: 100},
            colors: ['blue','red','green'],
            seriesType: 'bubble',
            series: {2: {type: 'line', pointSize: 0, lineWidth: 1, enableInteractivity: false, visibleInLegend: false}},
            animation: {duration:1500, easing:'out'},
            sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
        }
    });

Answer 1

[编辑：答案不适用于BubbleCharts，有关变通方法，请参见下面的更新]

您可以将第三个数据系列添加到两个数据点（0，0）和（100，100）。 然后设置该series.<series index>选项，如下所示：

series: {
    2: {
        // options for the 3rd series
        pointSize: 0, // makes the points in this series invisible
        lineWidth: 1, // connects the points in this series with a line
        enableInteractivity: false, // disables mouse effects (like spawning tooltips) for this series
        visibleInLegend: false // hides this series from the legend
    }
}

[编辑：这是BubbleCharts的解决方法]

由于BubbleCharts与其他图表类型不兼容，并且不能与COmboChart混合使用，因此，如果需要这样的线，则必须采用解决方法。 这是一个示例，该示例绘制了仅一条线的第二个图表，将BubbleChart的背景设置为“透明”，并使用CSS定位在BubbleChart下将线分层：

[javascript]

var table = new google.visualization.ChartWrapper({
    chartType: 'BubbleChart',
    containerId: 'table_div',
    options: {
        height: 800,
        width: 800,
        backgroundColor: 'transparent',
        bubble: {opacity: 0.2, stroke: 'transparent'},
        hAxis: {minValue: 0, maxValue: 100},
        vAxis: {minValue: 0, maxValue: 100},
        colors: ['blue','red','green'],
        animation: {duration:1500, easing:'out'},
        sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
    }
});

var hackChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'hack_chart_div',
    dataTable: [['x', 'y'],[0, 0], [100, 100]],
    options: {
        height: 800,
        width: 800,
        hAxis: {
            minValue: 0,
            maxValue: 100,
            textPosition: 'none',
            gridlines: {
                count: 0
            },
            baselineColor: 'none'
        },
        vAxis: {
            minValue: 0,
            maxValue: 100,
            textPosition: 'none',
            gridlines: {
                count: 0
            },
            baselineColor: 'none'
        },
        colors: ['blue'],
        pointSize: 0,
        lineWidth: 1,
        enableInteractivity: false,
        legend: {
            position: 'none'
        }
    }
});
hackChart.draw();

[HTML]

<div id="chart_container">
    <div id="table_div"></div>
    <div id="hack_chart_div"></div>
</div>

[CSS]

#chart_container {
    position: relative;
}
#table_div {
    z-index: 1;
}
#hack_chart_div {
    position: absolute;
    top: 0px;
    z-index: 0;
}

看到它在这里工作： http : //jsfiddle.net/asgallant/t5rkJ/