1

angularjs と highcharts の両方を使用して日付変更線タイプのグラフを表示しています。日付の値は、たとえば 20120905(YYYYMMDD) のように JSON 応答から取得されます。多くのフォーラムで読んだように、グラフにプロットするために日付を UTC 形式に変換しました。グラフは正しくプロットされていますが、私の xaxis は、すべての日時値に対して 1,370G のような UTC 値を表示しています。

$scope.chartConfig = {
            options: {
                chart: {
                    type: 'line',
                    zoomType: 'x'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '% of Accounts',
                data: outerSeries   /* Contains the data  similar to this. [[1368835200000, 2.9], [1371513600000, 0.5], [1374105600000, 1.94], [1376784000000, 1.44], [1379462400000, 1.18]] */
            }],  
            title: {
             text: tableTitle
            },
            xAxis: [{

                labels: {format: '{value:%Y}' },
                /*dateTimeLabelFormats:{
                  month:'%Y',
                  year:'%Y'
                },*/
              type:"datetime"
            }],
            yAxis: {title: {text: 'TestReport'}},
            tooltip: {
              formatter: function() {
              var myDate = new Date(this.x);
              var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
              return '<b>'+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e. %b', newDateMs) +': '+ this.y;}
            },
            //xAxis: {currentMin: 0, currentMax: 10, minRange: 1, title:{text:'Time Period'}},
            //xAxis: {ordinal:false,type:'datetime', dateTimeLabelFormats: {  year: '%b%Y' }, title:{text:'Time Period'}},
            loading: false
        }
    });
4

1 に答える 1

4

変更する必要があるのは xAxis の構成だけだと思います。

以下を試してください (xAxis 部分のみを強調表示します)。

$scope.chartConfig = {
        // other configuration
        xAxis: {
          type:"datetime",
          dateTimeLabelFormats:{
            month: '%b %e, %Y'
          }  // label in x axis will be displayed like Jan 1, 2012
        },
        // other configuration
}

サンプルデータを使用して、機能するフィドルを作成しました: http://jsfiddle.net/WEgmq/1/

気軽にフィドルで遊んでください。type:"datetime"そして、コメントアウトすると、 xAxis には、前述のように 1,370G のようなラベルが表示されることに気付くかもしれません。また、サンプルデータの間隔は 1 か月なので、 で format を設定しても xAxis のラベル形式は変更されませdayんdateTimeLabelFormats。month代わりに、最小間隔が 1 か月であるため、形式 を構成する必要があります。

で遊んで、dateTimeLabelFormats欲しいものを手にminTickInterval入れることができます。

于 2013-10-03T22:54:02.880 に答える