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

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

我正在使用包装在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);
},

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

相关推荐