Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

One-line summary [问题简述]

When rendering as SVG, and using gradient color in bar, Error " <text> 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 [其他信息]

Issue Analytics

State:
Created 5 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

Oviliacommented, May 21, 2018

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

1reaction

381510688commented, May 11, 2018

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

Top Results From Across the Web

When rendering as SVG, throw Error: <text> attribute ...

When rendering as SVG, and using gradient color in bar, Error " attribute transform: Expected number, 'rotate(NaN,111.68400 000…'" will be ...

d3.js - Expected ')' - SVG Transforms throwing error

Turns out you can't use units in SVG transforms. rotate(45deg) - doesn't work and will throw an error. rotate(45) - expected behavior.

transform - SVG: Scalable Vector Graphics - MDN Web Docs

The transform attribute defines a list of transform definitions that are applied to an element and the element's children.

attribute transform: Expected number, "scale(NaN) ...

I get an error " attribute transform: Expected number, "scale(NaN) translate(N..." whenever I resize the browser. In my application the underlying map ...

third_party/WebKit/LayoutTests/svg/dom/transform-parser- ...

Use n/p to move between diff chunks; N/P to move between comments. ... +CONSOLE ERROR: line 30: Error: <g> attribute transform: Expected number,...