Question

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

要制作我的图表我使用惯例：

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

但是，当我在ChartWrapper对象中输入时，有些自定义细节未被调用。

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

还有其他人，但这些应该足以满足这个问题，因为它们都包含在我试图排除故障的单个图表中。

我认为在所有这些中我都缺少一个共同元素，这就是为什么我认为最好将它们全部包含在一个问题中。必须有一些关于ChartWrapper语法的细节，我没有做对。

对于上述所有项目，我首先将这些内容放入＆＃39;选项＆＃39;对象，然后直接在ChartWrapper（）内部作为自己的键，无需任何额外的嵌套。

进入更具体的细节：

CODE：

以下是一些不起作用的示例代码：

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

我使用的图表响应了＆＃39;身高＆＃39;变量，但＆＃39;趋势线＆＃39;，＆＃39; isStacked＆＃39;和＆＃39; bar＆＃39;所有人都置若罔闻。

但是，如果我将它们放在＆＃39;选项之外＆＃39;他们也没有出现在图表中。

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

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，但这两个问题都没有答案。

如果它在我用于生成图表的整个脚本中有用：

SCRIPT：

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

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

要更正，您可以使用核心图表版本，
附加选项 - ＆gt; 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
    },
});

Google图表中ChartWrapper中的图表格式

1 个答案: