Incubator-echarts: When rendering as SVG, throw Error: <text> attribute transform: Expected number, "rotate(NaN,111.68400 000…".

Created on 4 May 2018  ·  6Comments  ·  Source: apache/incubator-echarts

One-line summary [问题简述]

When rendering as SVG, and using gradient color in bar, Error " attribute transform: Expected number, 'rotate(NaN,111.68400 000…'" will be thrown. Then copy the html in a frame and print the iframe, the label in bar will disappear.
Without using gradient, the error will also be thrown, but the label will show in print dialog.

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]: 4.0.4, if using 4.1.0, a more serious error will be thrown and nothing can be rendered
  • Browser version [浏览器类型和版本]: The latest Chrome
  • OS Version [操作系统类型和版本]: OSX 10.13.4

Expected behaviour [期望结果]

When rendering as SVG and using gradient color, no error will be thrown and the label can show in print dialog.

ECharts option [ECharts配置项]


config = {
          color: [ ],
          legend:{
              bottom:'1',
              selectedMode:false
          },
          xAxis: [
              {
                  type: 'category',
                  data: ['本月', '上月'],
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '我的错题数量',
                  type: 'bar',
                  barGap: '50%',
                  barMaxWidth:'18%',
                  silent:true,
                  itemStyle:{
                      barBorderRadius: [5, 5, 0, 0],
                      color:new echarts.graphic.LinearGradient(0, 1, 0, 0,[
                          {offset: 0, color: '#436CE1'},
                          {offset: 1, color: '#9587E9'}
                      ])
                  },
                  label:{
                      show:true,
                      color:'#333333',
                      position:'top',
                      formatter:'{c}题',
                  },
                  data: [38, 42],
              },
              {
                  name: '本市平均值',
                  type: 'bar',
                  barMaxWidth:'18%',
                  silent:true,
                  itemStyle:{
                      barBorderRadius: [5, 5, 0, 0],
                      color:new echarts.graphic.LinearGradient(0, 1, 0, 0,[
                          {offset: 0, color: '#2DDEB1'},
                          {offset: 1, color: '#33C6E7'}                  
                      ])
                  },
                  label:{
                      show:true,
                      color:'#333333',
                      position:'top',
                      formatter:'{c}题',

                  },
                  data: [24, 40]
              }
          ]
      }

Other comments [其他信息]


SVG bug

Most helpful comment

@TonyChanNJU Hi, I've fixed it in https://github.com/ecomfe/zrender/commit/8e389f27d7b7c0b22cfd284c4bc42533e7a04540 . Please wait for the next release. Before that, you can set rotate to be 0 as @381510688 said.
Thanks!

All 6 comments

@TonyChanNJU Can you show us the error in 4.1.0 ?

我在4.1.0 发现相同的问题
只要设置 series[*].label.show: true 就回触发这个错误

I had the same problem. @TonyChanNJU
Version 4.0.3 图表类型为bar
增加series[*].label.show: true 就会报错,去掉后没有问题~~~

@amily4555
可以增加rotate属性来临时解决这个问题,O(∩_∩)O哈哈~
label: { show: true, position: 'right', rotate: 0, formatter: '{c}' }

@TonyChanNJU Hi, I've fixed it in https://github.com/ecomfe/zrender/commit/8e389f27d7b7c0b22cfd284c4bc42533e7a04540 . Please wait for the next release. Before that, you can set rotate to be 0 as @381510688 said.
Thanks!

@381510688 确实可以,多谢!

Was this page helpful?
0 / 5 - 0 ratings