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

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

为了制作图表，我使用了约定：

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

但是，当我在ChartWrapper对象中输入某些自定义详细信息时，这些细节没有被调用。

特别是趋势线，将条形图上的条形更改为Horizo​​nta，然后将条形堆叠。

还有其他一些，但是这些足以满足这个问题，因为它们全部包含在我要解决的单个图表中。

我认为所有这些都缺少一个共同的元素，这就是为什么我认为最好将它们全部包含在一个问题中。关于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”和“条形图”全都置若de闻。

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

例如，以下代码也无效。

CODE2：

    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);
}

最佳答案

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

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

材料= 'Bar'

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'
    },
});

核心= '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
    },
});