Question

我正在使用Polymer 2.0和＆＃34; google-chart＆＃34;：＆＃34; GoogleWebComponents / google-chart＃^ 2.0.0＆＃34;。我在渲染饼图方面没有任何问题。但是，当我提供＆＃34;切片＆＃34;选项中的属性然后是具有相同数据中断的相同图表。

我无法找到我做错的事。

以下是代码段：

      <google-chart
          style="height: 300px; width: 100%; align: center;"
          id="cashflowCategoryPieChart"
          type = 'pie'
          options = '{
              "backgroundColor": {
                  "fill" : "transparent"
                },
              "pieHole": 0.4,
              "pieSliceBorderColor" : "none",
              "pieStartAngle" : 0,
              "pieSliceTextStyle": {
                "color": "white"
              },
              "pieSliceText": "label",
              "legend": "none",
              "colors": [
                        "#6a1b9a", "#4a148c", "#ea80fc", "#e040fb",
                        "#d500f9", "#aa00ff", "#f06292", "#ec407a",
                        "#e91e63", "#d81b60", "#c2185b", "#ad1457",
                        "#880e4f", "#ff80ab", "#ff4081", "#f50057",
                        "#9575cd", "#7e57c2", "#673ab7", "#5e35b1",
                        "#512da8", "#4527a0", "#311b92", "#b388ff",
                        "#7c4dff", "#651fff", "#6200ea", "#ba68c8",
                        "#ab47bc", "#9c27b0", "#8e24aa", "#7b1fa2"
                            ]
          }'
          data = '{{tranCatPieGraphData}}'
          >
        </google-chart>

使用值传递tranCatPieGraphData：

var  tranCatPieGraphData = [["Category","Amount"],["Transfers",26.979999999999993],["Savings",12],["Restaurants",8.7],["Other Income",1.5]]

它正确显示图表。没问题。

现在尝试在图表选项中添加Slices属性。如下所示，看到它抛出的错误 - ＆＃34;无法读取未定义的属性toLowerCase＆＃34;。

此处有非工作代码 - ＆gt;

<google-chart
          style="height: 300px; width: 100%; align: center;"
          id="cashflowCategoryPieChart"
          type = 'pie'
          options = '{
              "backgroundColor": {
                  "fill" : "transparent"
                },
              "pieHole": 0.4,
              "pieSliceBorderColor" : "none",
              "pieStartAngle" : 0,
              "pieSliceTextStyle": {
                "color": "white"
              },
              "pieSliceText": "label",
              "legend": "none",
              "slices" : { 1: {"offset": 0.1, "color": "#1a237e"}, },
              "colors": [
                        "#6a1b9a", "#4a148c", "#ea80fc", "#e040fb",
                        "#d500f9", "#aa00ff", "#f06292", "#ec407a",
                        "#e91e63", "#d81b60", "#c2185b", "#ad1457",
                        "#880e4f", "#ff80ab", "#ff4081", "#f50057",
                        "#9575cd", "#7e57c2", "#673ab7", "#5e35b1",
                        "#512da8", "#4527a0", "#311b92", "#b388ff",
                        "#7c4dff", "#651fff", "#6200ea", "#ba68c8",
                        "#ab47bc", "#9c27b0", "#8e24aa", "#7b1fa2"
                            ]
          }'
          data = '{{tranCatPieGraphData}}'
          >
        </google-chart>

Answer 1

尝试使用数组样式定义......

//slices -> 0, 1, ...
"slices": [{}, {"offset": 0.1, "color": "#1a237e"}],

Polymer 2.0 <google-chart> webcomponent带有切片的饼图选项抛出错误 - 无法定义toLowerCase undefined

1 个答案: