2017-04-09 28 views
1

私はChartjsを使って時系列の折れ線グラフを表示しています。Chartjs X軸のラベルとティックの書式

私のセットアップは、以下の画面が

enter image description here

データは、X軸の日付です(ラベル)を撃ったよう

this.chartSetup = { 
      type: 'line', 
      data: { 
      labels: this.times, 
      datasets: [{ 
       fill: true, 
       lineTension: 0.1, 
       backgroundColor: "rgba(75,192,192,0.4)", 
       borderColor: "rgba(75,192,192,1)", 
       label: title, 
       data: this.vals, 
       pointRadius: 0, 
      }] 
      }, 
      options: { 
      spanGaps: true, 
      legend: { 
       position: 'bottom', 
       labels: { 
       boxWidth: 10 
       } 
      }, 
      tooltips: { 
       enabled: false 
      }, 
      responsive: true, 
      maintainAspectRatio: false, 
      scales: { 
       xAxes: [{ 
       ticks: { 
        stepSize: 6, 
        unitStepSize: 5 
       }, 
       type: 'time', 
       time: { 
        displayFormats: { 
        hour: 'h:mm a', 
        minute: 'h:mm a', 
        } 
       } 
       }], 
      }, 
      } 
     }; 

    Chart.defaults.global.animation.easing = "easeOutBounce"; 
    this.chart = new Chart(this.canvas.nativeElement, this.chartSetup); 

私のチャートが見えます...以下の通りである、とだけ 時刻データは午前6時から午後6時まで(12時間分)

私はここにいくつかの問題がありますX軸ラベルの書式設定に合わせます。

  1. 初期の午前6時のラベルは、どのように私は

  2. 私のデータが行く(ので、おそらく90度切り捨て最初の値を修正します)X軸ラベルの回転を変更することができます

  3. を切断されています6pmになりますが、余分なX軸値(7pm)が表示されています。これを取り除くことはできますか?

ありがとうございます。

答えて

0

1,2 - minRotation = 90
3セット - あなたのX上の最大値を設定するには、私のために働いた何

1

はダニ構成で

autoskip: true 
autoSkipPadding: 30 

を設定した軸。

関連する問題