Highcharts 和 EXTJS 3：x 轴重叠的标签

Posted 2023-02-26

【中文标题】Highcharts 和 EXTJS 3：x 轴重叠的标签

【英文标题】：Highcharts and EXTJS 3: Labels in x axis overlap

【发布时间】：2011-12-14 15:19:03

【问题描述】：

我正在尝试在 EXTJS 3 面板上实现带有日期时间 x 轴的 Highchart 折线图，因此我正在使用 extjs 适配器和 Sencha 论坛上提供的所有内容。 我面临一个非常奇怪的问题。我的 x 轴上的所有刻度标签都位于相同的位置，因此它们重叠，如下所示：

这是我正在使用的代码：

var store = new Ext.data.JsonStore(
       url: '/graph',
       fields: [
            name: 'datamesura', type: 'int',
            name: 'despl_hor', type: 'float',
            name: 'despl_ver', type: 'float'
       ],
       root: 'dades'
     );

     var datastore_task = 
       run: function() 
         store.load();
       
     ;

     Ext.TaskMgr.start(datastore_task);

     Ext.QuickTips.init();
     var chart;

     chart = new Ext.ux.HighChart(
        series: [
                type: 'spline',
                dataIndex: 'despl_hor',
                name: 'Desplaçament horitzontal'
            ,
                type: 'spline',
                dataIndex: 'despl_ver',
                name: 'Desplaçament vertical'
            ],
        height: 500,
        width: 700,
        store: store,
        animShift: true,
        xField: 'datamesura',
        chartConfig: 
            chart: 
                marginRight: 210,
                marginBottom: 120,
                zoomType: 'xy'
            ,
            toolbar: 
                itemStyle: 
                    color: '#4572A7',
                    cursor: 'pointer'
                ,
                layout: 
                    xPosition: 'right',
                    yPosition: 'top',
                    x: 0,
                    y: -10
                
            ,
            title: 
                text: 'Prismes',
                x: -20
            ,
            subtitle: 
                text: 'Desplaçament',
                x: -20
            ,
            xAxis: [
                    title: 
                        text: 'Data',
                        margin: 20
                    ,
                    labels: 
                        rotation: 270,
                        y: 35
                    ,
                    type: 'datetime'
                ],
            yAxis: [
                title: 
                    text: 'Valor'
                ,
                plotLines: [
                        value: 0,
                        width: 1,
                        color: '#808080'
                    ]
            ],
            legend: 
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: 0,
                y: 100,
                borderWidth: 0
            
        
    );

    new Ext.Window(
        title: 'Example',
        layout: 'anchor',
        items: [chart]
    ).show();   

图表和时间尺度正在正确呈现。当我翻转任何点时，即使日期在工具提示中也是正确的。但是如您所见，所有标签都在 x 轴的开头。

数据来自 JSON 文件，格式如下：

"dades":["datamesura":1305158400000,"despl_hor":0,"despl_ver":0,"datamesura":1305590400000,"despl_hor":0.85509233483876,"despl_ver":0.7406906575,"datamesura":1305763200000,"despl_hor":0.40065251939804,"despl_ver":0.3806685951,"datamesura":1306195200000,"despl_hor":1.3354238226121,"despl_ver":0.3883164125,"datamesura":1306368000000,"despl_hor":1.2300886025811,"despl_ver":0.3028934962,"datamesura":1306800000000,"despl_hor":0.76491207579695,"despl_ver":0.7382504417,"datamesura":1306972800000,"despl_hor":0.97067811781249,"despl_ver":0.3934538156,"datamesura":1307404800000,"despl_hor":0.99251776941272,"despl_ver":0.1344402012,"datamesura":1307577600000,"despl_hor":1.7576987265171,"despl_ver":-0.0731718418,"datamesura":1308009600000,"despl_hor":1.7982043839063,"despl_ver":0.8377618489,"datamesura":1308182400000,"despl_hor":1.6815243145135,"despl_ver":0.6510250418,"datamesura":1308614400000,"despl_hor":1.4625103263909,"despl_ver":0.2423211682,"datamesura":1308787200000,"despl_hor":1.059558961408,"despl_ver":0.9443423224,"datamesura":1309219200000,"despl_hor":1.8495061606277,"despl_ver":0.7814450066,"datamesura":1309392000000,"despl_hor":1.9162507008479,"despl_ver":0.6051177109,"datamesura":1309824000000,"despl_hor":1.7213552221723,"despl_ver":0.6680561831,"datamesura":1309996800000,"despl_hor":1.9444381633778,"despl_ver":0.8635180524,"datamesura":1310428800000,"despl_hor":1.6798176421267,"despl_ver":0.8274643529,"datamesura":1310601600000,"despl_hor":1.4467543786006,"despl_ver":0.4695790538,"datamesura":1311033600000,"despl_hor":1.4726130928727,"despl_ver":0.2477731064,"datamesura":1311206400000,"despl_hor":1.2836033705939,"despl_ver":0.2656530857,"datamesura":1311638400000,"despl_hor":1.5078416389993,"despl_ver":0.3320340535,"datamesura":1312243200000,"despl_hor":1.9332533948761,"despl_ver":0.9397637894,"datamesura":1312848000000,"despl_hor":1.2659382917425,"despl_ver":0.0425702553,"datamesura":1313452800000,"despl_hor":1.2477477249428,"despl_ver":0.8257942379,"datamesura":1314057600000,"despl_hor":1.8118509156661,"despl_ver":0.4792052981,"datamesura":1314662400000,"despl_hor":1.918020654138,"despl_ver":0.5906438039,"datamesura":1315267200000,"despl_hor":1.7023765324099,"despl_ver":0.8507942294,"datamesura":1315872000000,"despl_hor":1.973909305414,"despl_ver":0.9492018485,"datamesura":1316476800000,"despl_hor":1.932831196975,"despl_ver":0.8957622496,"datamesura":1317081600000,"despl_hor":1.8232818443949,"despl_ver":1.0017163985,"datamesura":1317686400000,"despl_hor":0.73874846050601,"despl_ver":0.5016692077,"datamesura":1318896000000,"despl_hor":0.98500785814124,"despl_ver":0.2459143327,"datamesura":1320192000000,"despl_hor":1.8171299009977,"despl_ver":0.695824387,"datamesura":1321401600000,"despl_hor":1.0247267158126,"despl_ver":0.9220291425,"datamesura":1322524800000,"despl_hor":1.7464007827529,"despl_ver":0.7178103147,"datamesura":1323734400000,"despl_hor":1.8637498241985,"despl_ver":0.7515986697]

有人知道吗？尽管我非常喜欢 Highcharts，但我即将放弃并尝试另一个图表库。

【参考方案1】：

这似乎是 x 轴跨度的问题。我对 ExtJS 适配器一点也不熟悉，但我建议您研究以下任何一种：

您的选项是否指向了错误的字段？ 使用 series.pointStart/series.pointInterval controls 使用 xAxis setExtremes controls