javascript - Google Visualization API - JQuery - 增加 ColumnChart 中每两个条的间距

Question

我想在 Google Visualization ColumnChart 中的每两列之间添加更大的空间，并且一直在使用 bar groupWidth 属性来实现这一点，下面的代码显示了这一点:

<script type="text/javascript">
    google.charts.load('current', {
        packages: ['corechart', 'controls', 'charteditor']
    }).then(function () {
        var data = google.visualization.arrayToDataTable([@Html.Raw(ViewBag.ChartOutput)]);
        var width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';

        // define bars series colors
        var colors = ["#FF9900", "#FF6400", "#FF0000", "#9A0033"];
        var lineColors = ['#4422EE', '#0F1657'];

        // define filter columns
        var columnsTable = new google.visualization.DataTable();
        columnsTable.addColumn('number', 'Series #');
        columnsTable.addColumn('string', 'Select series: ');
        var initState = { selectedValues: [] };
        for (var i = 1; i < data.getNumberOfColumns(); i++) {
            var colIndex = columnsTable.addRow([i, data.getColumnLabel(i)]);
            initState.selectedValues.push(data.getColumnLabel(i));

            // assign series type, axis, and color -- store using row properties
            switch (data.getColumnLabel(i)) {
                    case 'Baseline - Acute':
                    case 'Baseline - Risk':
                    case 'Baseline - Any':
                    case 'Review - Acute':
                    case 'Review - Risk':
                    case 'Review - Any':
                        columnsTable.setRowProperty(colIndex, 'type', 'bars');
                        columnsTable.setRowProperty(colIndex, 'targetAxisIndex', 0);
                        columnsTable.setRowProperty(colIndex, 'color', colors[colIndex]);
                break;
            }
        }

        // define chart
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

        // define filter
        var filter = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter',
            containerId: 'filter_div',
            dataTable: columnsTable,
            options: {
                filterColumnIndex: 1,
                ui: {
                    caption: 'Series',
                    sortValues: false
                }
            },
            state: initState
        });

        // draw chart when filter is ready or changed
        google.visualization.events.addListener(filter, 'ready', drawChart);
        google.visualization.events.addListener(filter, 'statechange', drawChart);


        // draw filter
        filter.draw();

        // draw chart
        function drawChart() {
            var options = {

                hAxis: {
                    slantedText: true,
                    slantedTextAngle: 30,
                    title: 'Reporting Period'
                },
                vAxes: {
                    0: { logScale: false, title: '@Model.XAxis', minValue: 0 }
                },
                series: {},
                chartArea: {
                    top: 40,
                    left: 100,
                    width: '80%'
                },
                pointSize: 5,
                legend: { position: 'top' },
                width: width,
                height: '300px',
                colors: lineColors,
                lineWidth: 3.5
            };

            // define data view column and series options based on filter columns
            var viewColumns = [0];
            var state = filter.getState().selectedValues;
            state.forEach(function (column, index) {
                var colIndex;

                // find filter column index
                for (var i = 0; i < columnsTable.getNumberOfRows(); i++) {
                    if (columnsTable.getValue(i, 1) === column) {
                        colIndex = i;
                    }
                }
                viewColumns.push(colIndex + 1);

                // define series option
                options.series[index] = {
                    type: columnsTable.getRowProperty(colIndex, 'type'),
                    targetAxisIndex: columnsTable.getRowProperty(colIndex, 'targetAxisIndex')
                };
                if (colIndex < 6) {
                    options.series[index].color = columnsTable.getRowProperty(colIndex, 'color');
                    if (colIndex % 2 === 0) {
                        options.series[index] = { bar: {groupWidth: '100%'}}
                    }
                }
            });

            // define data view
            var dataView = new google.visualization.DataView(data);
            dataView.setColumns(viewColumns);

            // ensure enough columns selected to draw chart
            if (viewColumns.length > 1) {
                chart.draw(dataView, options);
            } else {
                chart.clearChart();
            }
        }

        var chart1 = "done";

        $(window).resize(function() {
            if(chart1 === "done"){
                chart1 = "waiting";
                setTimeout(function(){drawChart();chart1 = "done"},0);
            }
        });
    });
</script>

下面是我用来执行此操作的 javascript 部分:

if (colIndex < 6) {
                    options.series[index].color = columnsTable.getRowProperty(colIndex, 'color');
                    if (colIndex % 2 === 0) {
                        options.series[index] = { bar: {groupWidth: '100%'}}
                    }

到目前为止，设置对当前看起来像这样的 ColumnChart 的显示没有影响:

如何修改代码以实现上图中所示 ColumnChart 所需的样式可能需要每组两列之间的列宽？

完成的样式应模拟下图中显示的所有报告期间的 2015/16 中的列:

我在 JSFiddle 中提供了一个输出的工作示例:

https://jsfiddle.net/gd96aLb4/2/

Answer 1

没有选项会增加系列之间的间距，
但您可以在两者之间添加一系列空白数据。

然后我们可以使用以下系列选项从图表中隐藏系列...

    color: 'transparent',        // <-- ensure bar is not visible
    enableInteractivity: false,  // <-- prevent tooltip, etc.
    visibleInLegend: false       // <-- hide from legend

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var options = {
    hAxis: {
        slantedText: true,
        slantedTextAngle: 30,
        title: 'Reporting Period'
    },
    vAxes: {
        0: { logScale: false, title: 'No. of clients', minValue: 0 },
        1: { logScale: false, title: 'Average no. of days use', maxValue: 28, minValue: 0 }
    },
    series: {
      2: {
        color: 'transparent',
        enableInteractivity: false,
        visibleInLegend: false
      },
      5: {
        color: 'transparent',
        enableInteractivity: false,
        visibleInLegend: false
      }
    },
    chartArea: {
        top: 40,
        left: 100,
        width: '80%'
    },
    pointSize: 5,
    legend: { position: 'top' },
    height: '300px',
    lineWidth: 3.5
  };
  var data = google.visualization.arrayToDataTable([
    ['Outcomes','Baseline - Acute','Review - Acute','blank','Baseline - Risk','Review - Risk','blank','Baseline - Any','Review - Any'],
    ['2015/16',5794,4096,0,2323,1785,0,6073,4281],
    ['2016/17',5692,4140,0,2178,1785,0,5909,4323],
    ['2017/18',5680,4131,0,2479,1946,0,5989,4396]
  ]);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>