Question

早上好/晚上好！我一天中的大部分时间都在看这个无济于事，所以是时候吸引更多的观众......

我正在使用包含在ExtJS 4.2.2容器类中的Highcharts“solidgauge”图表。当我创建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事件处理程序等。

是否有人建议如何将标签置于仪表内居中并在调整图表大小时使其正确定位？

提前感谢您提供的任何帮助。

Answer 1

像标签文字大小的2.5vw这样的HTML属性在这种情况下不起作用，因为图表是画布并且在渲染上它就像打印在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);
},

Highcharts SolidGauge标签调整大小问题

1 个答案: