2

下部の x 軸バーで日付が重なっています。これを解決するための最良の解決策は何ですか?

日付のカウントが 13 を超える場合、カテゴリ ラベルがなくても問題ありませんが、少なくともポイント マウスオーバーの日付が必要です。

フォーマッター機能を試しましたが、機能しません。日付範囲ではなく数字が表示されます。

 xAxis: {
      categories:{
           formatter: function() {
               ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
           }
      }
 },

どのように見えるかを示すためにjsfiddleを含めました。

http://jsfiddle.net/8eTnE/

4

3 に答える 3

3

コードを変更した、

        tickInterval : 2,
        labels : { y : -15, rotation: -45, align: 'right' }

フィドルのデモ

Y軸についても同じことができます。labels : { y : -15, rotation: -45, align: 'right' } 値で遊んでください。あなたはやるべきです。

于 2013-07-19T05:56:46.377 に答える
2

ここでは、より良い出力が表示されます

http://jsfiddle.net/8eTnE/2/

追加、x 軸のラベル

labels: {
                    rotation: -45,
                    align: 'right'

                }

次のように、mmarginbottom をチャートで 75 に増やします。

 marginBottom: 75

ここに完全なコードがあります

  $(function () {

        var curdateVar = "04/01/2013";
        var dateinreq = "04/01/2013";
        var csdataArr = null;
        //var data = [0,0,0,0,0,0,0];
        var data1 = new Array(6);
        var data2 = new Array(6);


        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'containermain',
                    type: 'line',
                    backgroundColor: {
                        linearGradient: [0, 0, 250, 500],
                        stops: [
                                                                   [0, '#bbb'],
                                                                   [0.05, '#fff'],
                                                                   [1, 'white']
                        ]
                    },
                    borderColor: '#000000',
                    borderWidth: 2,
                    className: 'dark-container',
                    marginRight: 130,
                    marginBottom: 75
                },
                title: {
                    text: 'Activity Stats',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Calories Burned',
                    x: -20
                },
                xAxis: {
                    categories: ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
                    ,labels: {
                rotation: -45,
                align: 'right'

            }
                        },
                        yAxis: {
                            title: {
                                text: 'Calories'
                            },
                            min: 0,
                            max: 2000,
                            tickInterval: 50,
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            formatter: function () {
                                //  return '';
                                return '<b>' + this.series.name + '</b><br/>' +
                                this.x + ': ' + this.y + 'cals';
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
                        },
                        series: [{
                            name: 'Activity',
                            data: [120       ,473       ,473       ,0         ,142       ,509       ,296       ,398       ,558       ,136       ,98        ,330       ,355       ,289       ]
                        /* data: data1]*/
                    }]
                    });
                });

    });

デモからより多くのフォーマットを参照してください

于 2013-07-19T06:05:58.307 に答える