javascript - Highcharts 和 EXTJS 3 : Labels in x axis overlap

Question

我正在尝试在 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，但我即将放弃并尝试另一个图表库。

Answer 1

这似乎是 x 轴跨度的问题。我对 ExtJS 适配器一点也不熟悉，但我建议研究其中的任何一个:

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