在 Google 图表中结合风格、区间和确定性

Question

看看https://jsfiddle.net/DavidHyde/fkuonb5s/。这是基于 Google 图表文档中的示例以及我运行的代码。我没有编写代码，也不是图表专家，所以还不了解所有代码。

无论如何，我在组合样式、间隔和确定性角色时遇到了问题。好像我可以申请任何一个，但是当我有两个或更多时，只有第一个被申请。

指定“确定性”给出：

应用“样式”得到：

这只是“间隔”

我真正想做的是为影线应用确定性角色，为水平条应用间隔角色。

有人能帮忙吗？谢谢

Whosebug 说任何 jsfiddle.net 都必须附有代码，所以在这里...

google.charts.load('current', { packages: ['corechart', 'bar'] });
    google.charts.setOnLoadCallback(drawRightY);

    function drawRightY() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month'); // Implicit domain label col.
        data.addColumn('number', 'Sales'); // Implicit series 1 data col.
        data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
        data.addColumn({ type: 'string', role: 'style' }); // style col.
        data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
        data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
        data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
        data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
        data.addRows([
            ['April', 1000, true, 'stroke-color: #703593; stroke-width: 4', 900, 1100, 'A', 'Stolen data'],
            ['May', 1170, true, 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF', 1000, 1200, 'B', 'Coffee spill'],
            ['June', 660, true, 'fill-color: red; fill-opacity:.3', 550, 800, 'C', 'Wumpus attack'],
            ['July', 1030, false, null, 100, 300, null, null]
        ]);
        var barOptions = new google.visualization.ComboChart(document.getElementById('chart_div'));

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, 2]);
        var barSetting = {
            seriesType: "bars",
            areaOpacity: 0.1,
            orientation: 'horizontal',
            series: { 2: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
            legend: 'none',
            vAxis: {
                maxValue: 100,
                minValue: 0,
                format: "#'%'"
            },
            hAxis: {
                textStyle: {
                    fontSize: 9
                }
            },
            colors: ["#fbbd86", "#000000", "#000000", "#000000"],
            height: 200,
            width: 420
        };

        barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
        barOptions.draw(view, barSetting);

    }

Answer 1

这是来自@dlaliberte 的更新后的 jsfiddle，显示图表正在运行 - https://jsfiddle.net/dlaliberte/cvu3t7se/6/。

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawRightY);

function drawRightY() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Month'); // Implicit domain label col.
                    data.addColumn('number', 'Sales'); // Implicit series 1 data col.
                    data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
                    data.addColumn({ type: 'string', role: 'style' }); // style col.
                    data.addColumn({ type: 'number', role: 'interval' });  // interval role col.
                    data.addColumn({ type: 'number', role: 'interval' });  // interval role col.
                    data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
                    data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
                    data.addRows([
                        [
                            'April'
                            , 1000
                            , true
                            , 'stroke-color: #703593; stroke-width: 4'
                            , 900
                            , 1100
                            , 'A'
                            , 'Stolen data'
                    ],
                        [
                            'May'
                            , 1170
                            , true
                            , 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF'
                            , 1000
                            , 1200
                            , 'B'
                            , 'Coffee spill'
                    ],
                        [
                            'June'
                            , 660
                            , true
                            , 'fill-color: red; fill-opacity:.3'
                            , 550
                            , 800
                            , 'C'
                            , 'Wumpus attack'
                    ],
                        [
                            'July'
                            , 1030
                            , false
                            , null
                            , 100
                            , 300
                            , null
                            , null
                    ]
                    ]);
        var barOptions = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, 2, 3, 4, 5, 6, 7]);
        var barSetting = {
            // seriesType: "bars",
            //intervals: { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' },
            areaOpacity: 0.1,
            orientation: 'horizontal',
            xseries: { 0: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
            legend: 'none',
            vAxis: {
                maxValue: 100,
                minValue: 0,
                format: "#'%'"
            },
            hAxis: {
                textStyle: {
                    fontSize: 9
                }
            },
            colors: ["#fbbd86", "#000000", "#000000", "#000000"],
            height: 200,
            width: 420
        };

barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
        barOptions.draw(view, barSetting);
        
    }

在 Google 图表中结合风格、区间和确定性

Combining style, interval and certainty in Google Charts

google-visualization