javascript-Highcharts SolidGauge标签调整大小问题

2019-11-18 04:37:33 阅读：705 来源： 互联网

早上好/晚上好！我一整天都在看这个视频,但没有结果,是时候吸引更多观众了……

我正在使用包装在ExtJS 4.2.2容器类中的Highcharts“ solidgauge”图表.创建实体规时,一切看起来都很好,直到尝试调整其大小为止.当我调整尺寸时,系列标签会上下移动.

好：

错误(调整大小后)：

罪魁祸首是我最初需要设置的“ Y”值,因此“ 79％”显示在量规的中间,而不是在其下方.这是初始化代码：

 me.series = [{
        name: 'Uptime',
        data: [80],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:2.5vw;color:black"' +
            '>{y}%</span><br/></div>',
            x: 0,
            y: -65,
            borderWidth: 0,
            useHTML: true
        },
        tooltip: false,
        type: 'solidgauge',
        valueField: 'uptime'
    }];

调整大小时,“ Y：-65”使“ 79％”在图表上移动.如果将X和Y值设置为0,则文本会调整大小(只是标签距离量规太远了).

我不知道当标签最初放置在[0,0]以外的位置时,如何使该标签正确地调整图表大小.我看了一下chart.Render对象,各种CSS配置,覆盖ExtJS事件处理程序等.

有没有人建议如何在调整图表大小时将标签居中放置在量规内部并使其正确定位？

预先感谢您提供的任何帮助.

解决方法:

在这种情况下,无法使用HTMLv属性(如标签文本大小的2.5vw),因为图表是画布,并且在渲染时就像打印在dom上(尝试在浏览器html dom上进行检查),使用不同的图表来制作仪表板解决了删除标签,再次添加标签并调用以下问题：

chart.redraw();

接下来,我写我的旧代码以重置标签的字体大小,也许有些更改,我正在使用Ext 4

setFieldTitleHeight: function(){
    var view=this.getView(),
        panelHeight=view.height;
    var newFontSize=Math.floor((panelHeight/290)*16);
    view.items.items[0].getAxes()[0].getTitle().setAttributes({fontSize: newFontSize+'px'});
},

setDataLabelSize:function(){
    var view=this.getView(),
        panelHeight=view.height,
        serie=view.items.items[0].getSeries()[0],
        assi=view.items.items[0].getAxes();

    var newFontSize=Math.floor((panelHeight/290)*16);
    var label=serie.config.label;
    serie.config.label.fontSize= newFontSize+'px';
    serie.setLabel(label);
    Ext.iterate(assi,function(item,index,array){
        item.getLabel().setAttributes({fontSize:newFontSize+'px'});
    },this);
},

标签：extjs,highcharts,javascript
来源： https://codeday.me/bug/20191118/2025408.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-Highcharts SolidGauge标签调整大小问题