google 在一列中绘制多个值

Question

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

谢谢指教。

我使用的代码JsFiddle and 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" 作为数据集的名称。您不能只选择任意名称。如果这样做，图表会绘制，但 "diff" 选项将不起作用（疯狂，必须写入代码）。颜色必须像下面这样设置，一种颜色在 "colors" 选项中设置，另一种颜色在 "diff" 选项中设置。

google 在一列中绘制多个值

google chart multiple values in one column

charts

google-visualization

bar-chart