Question

我正在尝试在我的Google图表表中插入css。

我的代码

var cssClassNames = {'headerRow': 'cssHeaderRow',
                  'tableRow': 'cssTableRow',
                  'oddTableRow': 'cssOddTableRow',
                  'selectedTableRow': 'cssSelectedTableRow',
                  'hoverTableRow': 'cssHoverTableRow',
                  'headerCell': 'cssHeaderCell',
                  'tableCell': 'cssTableCell',
                  'rowNumberCell': 'cssRowNumberCell'
              };
var options = {page: 'enable', pageSize:20, height:'100%',
              sort:'enable', showRowNumber: true, width: '100%',
              showRowNumber: true,
              alternatingRowStyle:true, allowHtml: true, 
              cssClassNames: cssClassNames}
this.$.chart_class.options = options;

但它不起作用。我添加了

this.$.chart_class.set('options', options);

和

this.$.chart_class.redraw();

我也需要对分页进行调整。

Answer 1

请提供完整的代码以及您需要什么，但如果您已经存在图表并且需要图表样式，那么您可以使用元素的样式：

<template>
<style>
google-chart {
  height: 300px;
  width: 50em;
  ......
}
..... 
</style> 

 <google-chart
  type="{{type}}"
  options="{{options}}"
  cols="{{cols}}"
  rows="{{rows}}">
</google-chart>

如果您需要动态指定google-chart属性而不是指定cols和rows，那么您的选项不会格式化为元素description。但是，您可以简单地动态使用和定义属性：

在属性声明中，您可以定义此属性和选项。或者在带按钮的功能中或以某种方式调用此功能：

defininingChartVariables(){
    var type = "pie"  // See the possible types below link.
    var cols = [<specify an array for cols>];
    var rows = [<specify an array for rows>];
    var options = {title: "Chart title goes here",
                   hAxis: {title: "Categories"},
                   vAxis: {title: "Values", minValue: 0, maxValue: 2},
                   legend: "none" };
    this.set('type',type);
    this.set('cols',cols);
    this.set('rows',rows);
    this.set('optiosn',options);
}

查看可能的types

聚合物谷歌图表css

1 个答案: