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

Question

我正在使用 Polymer 2.0 和 "google-chart"："GoogleWebComponents/google-chart#^2.0.0"。我在渲染饼图时没有问题。但是当我在选项中提供 "slices" 属性时，具有相同数据的相同图表会中断。

我找不到我做错了什么。

这是代码片段：

      <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]]

图表显示正确。没问题。

现在尝试在图形选项中添加切片属性。像下面一样，看看它抛出的错误 - "cannot read property toLowerCase of undefined".

此处代码无效 ->

<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

Polymer 2.0 <google-chart> webcomponent Pie Chart with Slices Options throws Error - cannot define toLowerCase of undefined

google-visualization

polymer-2.x