谷歌在一列中绘制多个值

Question

如何在 1 列中显示 2 个值（将红色和黄色列分成一列）？
我有按月订购的销售计划和销售价值。
例如：
一月 - 计划：100，售出：80
二月 - 计划：150，已售出：150
所以我想看到 2（记住 4 列，第二个值应该与第一个值重叠）列：
100 80
150 150
第一列将用两种颜色着色，因为售价低于计划 (100/80)
第二列将以一种颜色（黄色）着色，因为第二列与第一个值 150/150 重叠
isStacked: true 不与第一列重叠

感谢您的建议。

我使用 JsFiddle 和 what I need 的代码

google.load('visualization', '1', {packages: ['corechart', 'bar']});
        google.setOnLoadCallback(drawStacked);

        function drawStacked() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Date');
            data.addColumn('number', 'Plan');
            data.addColumn('number', 'Sold');
            data.addRows([
                ['Jan, 2015', 100, 80],
                ['Feb, 2015', 150, 150],
            ]);
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, {
                colors: ['red', 'yellow'],
                width: 600,
                height: 175,
                title: 'Total',
                legend: 'none',
            });

        }

Answer 1

我只是在做一个饼图样本，所以我用你的数据设置了一个差异栏样本。它有我们的 PDF 打印代码，但显示了我认为你想要的（除了颜色）：

http://jsfiddle.net/1og99wL1/

function drawChart() {
        var oldData = new google.visualization.DataTable();
        oldData.addColumn('string', 'Date');
        oldData.addColumn('number', 'Plan');
        oldData.addRows([
            ['Jan, 2015', 100],
            ['Feb, 2015', 150],
        ]);
        var newData = new google.visualization.DataTable();
        newData.addColumn('string', 'Date');
        newData.addColumn('number', 'Sold');
        newData.addRows([
            ['Jan, 2015', 80],
            ['Feb, 2015', 150],
        ]);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        var data = chart.computeDiff(oldData, newData);
        var options = {
            colors: ['yellow'],
            diff: { 
                 oldData: { opacity: 1, color: '#ff0000' }, 
                 newData: { opacity: 1, widthFactor: 1 }
            },
            legend: 'none',
            width: 600
        };
        <!-- For the PDF print -->
        google.visualization.events.addListener(chart, 'ready', AddNamespace);
        chart.draw(data, options);
    }

结果：

评论：

您必须使用“oldData”和“newData”作为数据集的名称。您不能只选择任意名称。如果这样做，图表将绘制，但“差异”选项将不起作用（疯狂，必须刻录到代码中）。颜色必须如下设置，其中一种颜色设置在“colors”选项中，另一种颜色设置在“diff”选项中。