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/

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

1 个答案: