css - Polymer google-chart 表格 css

Question

我正在尝试在我的 google-chart 表格中插入 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