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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了聚合物2.0 webcomponent带有切片的饼图选项抛出错误 - 无法定义toLowerCase未定义相关的知识,希望对你有一定的参考价值。

我正在使用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"}],

以上是关于聚合物2.0 webcomponent带有切片的饼图选项抛出错误 - 无法定义toLowerCase未定义的主要内容,如果未能解决你的问题,请参考以下文章

Legenditemclick 上的 Highcharts 饼图避免切片饼图,但在图例项上显示动画

从饼图中删除所有切片文本 (ios-charts/mpandroidchart)

如何使用值数组在 Highcharts 饼图图例中获取数据名称而不是“切片”?

如何绘制一个颜色列表的饼图

R带有百分比的饼图

MATLAB;带有 2+ / 拆分图例的饼图 R2017b