时间戳

首页 > 解决方案 > 谷歌条形图不会是透明背景

javascript - 谷歌条形图不会是透明背景

问题描述

我使用这些代码，但我无法制作透明背景。另外，我无法为数据制作循环。我尝试使用 data.addColumn(ar[i],ar2[i]) 循环，但它不会成功。

  function drawPaLoChart() {
    var data = google.visualization.arrayToDataTable([
        ['Hours', 'Seconds'],
        ['0',  pageload[0]],
        ['1',  pageload[1]],
        ['21',  pageload[21]],
        ['22',  pageload[22]],
        ['23',  pageload[23]]
    ]);

    var options = {
        chart: {
            legend: { position: 'none' },
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
            axes: {
                x: {
                    0: { side: 'top', label: 'White to move'} // Top x-axis.
                }
            },
            bar: { groupWidth: "90%" },
            backgroundColor: {fill: 'transparent'},
            chartArea: {
                backgroundColor: 'transparent'
            }
        }
    };

    var chart = new google.charts.Bar(document.getElementById('palochart'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

标签： javascriptchartsgoogle-visualization

解决方案

首先，只有title和subtitle选项应该在图表键内，
如下... 

var options = {
    chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    },
    legend: { position: 'none' },
    axes: {
        x: {
            0: { side: 'top', label: 'White to move'} // Top x-axis.
        }
    },
    bar: { groupWidth: "90%" },
    backgroundColor: {fill: 'transparent'},
    chartArea: {
        backgroundColor: 'transparent'
    }
};

至于循环，使用数组在循环中构建数据...... 

var chartData = [
    ['Hours', 'Seconds']
];

for (var i = 0; i < pageload.length; i++) {
  chartData.push([i.toString(), pageload[i]]);
}

var data = google.visualization.arrayToDataTable(chartData);

推荐阅读