javascript - Google Charts 中 ChartWrapper 中的图表格式化

Question

我正在使用 Google Charts 的仪表板部分创建各种图表。

为了制作我的图表，我使用了惯例:

var chartName = new google.visualization.ChartWrapper({
    // lots of options here
});

但是，当我将某些自定义详细信息输入到 ChartWrapper 对象中时，它们并没有被调用。

特别是趋势线，在条形图上将条形更改为水平，并使条形堆叠。

还有其他的，但这些应该足以解决这个问题，因为它们都包含在我试图解决的单个图表中。

我假设我在所有这些问题中都遗漏了一个共同要素，这就是为什么我认为最好将它们全部包含在一个问题中。一定有一些关于 ChartWrapper 语法的细节我没弄清楚。

对于上面提到的所有项目，我首先将它们放在“选项”对象中，然后作为它们自己的键直接放在 ChartWrapper() 中，而无需任何额外的嵌套。

要了解更多细节:

代码:

下面是一些不起作用的示例代码:

var childrenHelpedChart = new google.visualization.ChartWrapper({
        'chartType'       :  'Bar',
        'containerId'     :  'chart_div2',
        'view'            :  {
            'columns'     : [0, 2, 3]
        },

        'options'         : {
            'height'      : 400,
            'trendlines'  :  {0 : {}},
            'isStacked'   : 'percent',
            'bar'         : 'horizontal'
        },
    });

我使用的图表响应“高度”变量，但“趋势线”、“isStacked”和“条形图”都被置若罔闻。

但是，如果我将它们放在“选项”对象之外，它们也不会显示在图表中。

例如，下面的代码也没有效果。

代码 2:

    var childrenHelpedChart = new google.visualization.ChartWrapper({
        'chartType'       :  'Bar',
        'containerId'     :  'chart_div2',
        'view'            :  {
            'columns'     : [0, 2, 3]
        },

        'options'         : {
            'height'      : 400
        },
        'trendlines'      : {
            0             : {}
        },
        'bar'             : 'horizontal',
        isStacked       : 'percent'
});

我看到两个非常相似的问题 here和 here , 但这些都没有答案。

如果对您有帮助，请查看我用来生成图表的整个脚本:

脚本:

google.charts.setOnLoadCallback(initialize);

function initialize() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1lmmpJs2Bz3EfQWExB4KXq_uJWoLlq1PMCahy6w4ipcE/gviz/tq?gid=1104676809');
    query.send(drawDashboard)
}

function drawDashboard(response) {

    var data = response.getDataTable();

    var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));

    var storytimeDateFilter2 = new google.visualization.ControlWrapper({
        'controlType':  'DateRangeFilter',
        'containerId':  'date_filter_div2',
        'options'    :  {
            'filterColumnIndex' : 0
        }
    }); 

    var childrenHelpedChart = new google.visualization.ChartWrapper({
        'chartType'       :  'Bar',
        'containerId'     :  'chart_div2',
        'view'            :  {
            'columns'     : [0, 2, 3]
        },

        'options'         : {
            'height'      : 400
        },
        'trendlines'      : {
            0             : {}
        },
        'bar'             : 'horizontal',
        'isStacked'       : 'percent'
    });

dashboard.bind(storytimeDateFilter2, childrenHelpedChart);
dashboard.draw(data);
}

Answer 1

您使用的图表是Material图表
有几个选项根本不适用于 Material 图表
你可以在这里找到列表 --> Tracking Issue for Material Chart Feature Parity #2143

要更正，您可以使用Core 图表版本，
有一个附加选项 --> theme: 'material'

Material = '酒吧'

var childrenHelpedChart = new google.visualization.ChartWrapper({
    'chartType'       :  'Bar',  // <- Material version
    'containerId'     :  'chart_div2',
    'view'            :  {
        'columns'     : [0, 2, 3]
    },

    'options'         : {
        'height'      : 400,
        'trendlines'  :  {0 : {}},
        'isStacked'   : 'percent',
        'bar'         : 'horizontal'
    },
});

Core = 'BarChart'(水平)-- 或 -- 'ColumnChart'(垂直)

var childrenHelpedChart = new google.visualization.ChartWrapper({
    'chartType'       :  'BarChart',  // <-- Core version
    'containerId'     :  'chart_div2',
    'view'            :  {
        'columns'     : [0, 2, 3]
    },

    'options'         : {
        'height'      : 400,
        'trendlines'  :  {0 : {}},
        'isStacked'   : 'percent',
        'theme'       : 'material'  // <- Material theme
    },
});