chartjs的時間刻度格式問題，主要是unitStepSize

我很喜歡chartjs，但是我一直在努力得到我的時間刻度後的確切格式。我所經過是這樣的：chartjs的時間刻度格式問題，主要是unitStepSize

標籤不應該對角（理想 - 不是一個大風扇）
理想我會能夠指定刻度線的最小間隙，以避免以上，像7天

我一直在使用以下xAxes設置：

xAxes: [{ 
    type: 'time', 
    unit: 'day', 
    unitStepSize: 10, 
    minUnit: 'day', 
    time: { 
    displayFormats: { 
     day: 'D-MMM', 
     week: 'D-MMM', 
     month: 'D-MMM', 
     quarter: 'D-MMM', 
    } 
    } 
}]

我的日期是在「YYYY-MM-DD」格式消耗。

現在它似乎忽略了unitStepSize。

完整的例子可以在這裏找到： https://jsfiddle.net/koendirckx/fqhv8cjs/5/

來源

2016-11-27 koend

與此相同的問題我自己奮鬥的時間比我應該有，我終於發現了Chartjs文檔中的印刷精美的http://www.chartjs.org/docs/#scales-time-units的unitStepSize參數需要在時間子選項中定義。

我正在做：

scales: { 
       xAxes: [{ 
        type: "time", 
        time: { 
         unit: 'day', 
         displayFormats: { 
          day: 'MMM DD', 
         }, 
        }, 
        ticks: { 
         fontColor: "black", 
         fontSize: 12, 
         fontStyle: "normal", 
         fontFamily: "Segoe UI", 
        }, 
        unitStepSize: 7, 
       }], 
       yAxes: yAxes 
      },

何時應該已經做：

scales: { 
       xAxes: [{ 
        type: "time", 
        time: { 
         unit: 'day', 
         displayFormats: { 
          day: 'MMM DD', 
         }, 
         unitStepSize: 7, 
        }, 
        ticks: { 
         fontColor: "black", 
         fontSize: 12, 
         fontStyle: "normal", 
         fontFamily: "Segoe UI", 
        }, 
       }], 
       yAxes: yAxes 
      },

在更廣的範圍內：（注意eleChart1是圖表的畫布DOM元素，而Y軸，數據集和ChartName是在示例之外構建的對象/變量。）

var Chart1 = new Chart(eleChart1, { 
     type: 'line', 
     lineWidth: 15, 
     data: { 
      datasets: datasets, 
     }, 
     options: { 
      showPointLabels: true, 
      legend: { 
       display: true, 
       //position: "bottom" 

      }, 
      title: { 
       display: true, 
       text: ChartName, 
       fontSize: 18, 
       fontStyle: "bold", 
       fontFamily: "Segoe UI" 
      }, 
      scales: { 
       xAxes: [{ 
        type: "time", 
        time: { 
         unit: 'day', 
         displayFormats: { 
          day: 'MMM DD', 
         }, 
         unitStepSize: 7, 
        }, 
        ticks: { 
         fontColor: "black", 
         fontSize: 12, 
         fontStyle: "normal", 
         fontFamily: "Segoe UI", 
        }, 
       }], 
       yAxes: yAxes 
      }, 
     } 
    });

底線：一旦我把時間對象的unitStepSize選項，它按預期工作。

來源

2017-01-02 20:20:41 LBW

chartjs的時間刻度格式問題，主要是unitStepSize

回答

相關問題