echarts html style affect canvas measureText calculate

dzhpxtsq  于 2022-10-20  发布在  Echarts
关注(0)|答案(3)|浏览(930)

Version

4.7.0

https://gallery.echartsjs.com/editor.html?c=xc4p47M_rM

Steps to reproduce

The canvas object use to measureText is no append to html document. so the style is no same to target canvas.

  1. // https://github.com/ecomfe/zrender/blob/master/src/contain/text.js#L403
  2. // Avoid assign to an exported variable, for transforming to cjs.
  3. methods.measureText = function (text, font) {
  4.     var ctx = getContext();
  5.     ctx.font = font || DEFAULT_FONT;
  6.     return ctx.measureText(text);
  7. };
  9. // https://github.com/ecomfe/zrender/blob/master/src/core/util.js#L200
  10. methods.createCanvas = function () {
  11.     return document.createElement('canvas');
  12. };

local test code
incubator-echarts/test/testChart.html

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  5.     <script src="lib/esl.js"></script>
  6.     <script src="lib/config.js"></script>
  7.     <script src="lib/jquery.min.js"></script>
  8.     <script src="lib/facePrint.js"></script>
  9.     <script src="lib/testHelper.js"></script>
  10. </head>
  11. <body>
  12.     <style>
  13.         body {
  14.             margin: 0;
  15.             font-variant: tabular-nums;
  16.         }
  17.     </style>
  18.     <div id="main" style="width: 360px;height:224px;border: 1px solid #000;"></div>
  19.     <script>
  20.         require([
  21.             'echarts'
  22.         ], function (echarts) {
  23.             option = {
  24.                 grid: {
  25.                     left: 0,
  26.                     top: 20,
  27.                     right: 0,
  28.                     bottom: 0,
  29.                     "containLabel": true
  30.                 },
  31.                 "dataset": {
  32.                     "source": [["key", "1", "2"], ["201904", "39.1087", "18403.0877"]],
  33.                 },
  34.                 "xAxis": {
  35.                     "type": "category",
  36.                 },
  37.                 "yAxis": [{
  38.                     "type": "value",
  39.                     "axisLabel": {
  40.                         "fontSize": 12,
  41.                         "fontFamily": "BlinkMacSystemFont",
  42.                     },
  43.                 },
  44.                 {
  45.                     "type": "value",
  46.                     "axisLabel": {
  47.                         "fontSize": 12,
  48.                         "fontFamily": "BlinkMacSystemFont",
  49.                     },
  50.                 }],
  51.                 "series": [{
  52.                     "type": "bar",
  53.                     "barCategoryGap": "70%",
  54.                 },
  55.                 {
  56.                     "type": "line",
  57.                     "yAxisIndex": 1,
  58.                     "symbol": "circle",
  59.                 }]
  60.             };
  62.             myChart = echarts.init(document.getElementById('main'));
  64.             myChart.setOption(option);
  65.         });
  66.     </script>
  67. </body>
  68. </html>

What is expected?

measureText method can be calculate correctly

What is actually happening?

calculate label width error, when set special style to body (font-variant: tabular-nums;) and set label fontFamily:BlinkMacSystemFont

when I debug code in local, modify code as blow. it run correctly

  1. // https://github.com/ecomfe/zrender/blob/master/src/core/util.js#L200
  2. methods.createCanvas = function () {
  3.     const el = document.createElement('canvas');
  4.     el.style = "width:0px; height:0px;";
  5.     document.body.append(el);
  6.     return el;
  7. };
echarts

3条答案

按热度按时间
cotxawn7

cotxawn71#

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure thatyou have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org . Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list .

Have a nice day! 🍵

赞(0）分享  回复(0）举报  2022-10-20
ou6hu8tu

ou6hu8tu2#

@lidianhao123 Would you like to submit PR to fix this issue?

赞(0）分享  回复(0）举报  2022-10-20
ckx4rj1h

ckx4rj1h3#

Looks like BlinkMacSystemFont caused the problem.

赞(0）分享  回复(0）举报  2022-10-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com