聚合物2.0 webcomponent带有切片的饼图选项抛出错误 - 无法定义toLowerCase未定义

Posted 2021-04-09

我正在使用Polymer 2.0和“google-chart”：“GoogleWebComponents / google-chart＃^ 2.0.0”。我在渲染饼图方面没有任何问题。但是当我在Options中提供“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]]

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

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

这里的非工作代码 - >

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

答案

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

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