2017-04-09 434 views
1

我使用Chartjs來顯示時間序列線圖。Chartjs 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); 

我的圖表看起來像下面的屏幕截圖

enter image description here

的數據是X軸的日期(標籤),只是數字爲Y. 時間數據從早上6點到下午6點(價值12小時)

我在這裏有幾個問題所有與X軸標籤格式配合使用。

  1. 初始上午06點標籤被切斷

  2. 如何更改X軸標籤的旋轉(90度,以便也許將修復截短第一值)

  3. 我的數據去到6pm,但它顯示額外的X軸值(7pm)。我可以擺脫這個嗎?

在此先感謝您的任何建議。

回答

0

1,2 - 設置minRotation = 90
3 - 設定你的X最大值軸

1

什麼工作對我來說是在蜱配置設置

autoskip: true 
autoSkipPadding: 30