Zeitskala formatieren Probleme mit chartjs, meist unitStepSize

Question

Ich liebe chartjs, aber ich habe gekämpft, um die genaue Formatierung ich bin nach, wenn es um meine Zeitskala kommt. Was ich nach ist die folgende:

• Siegel sollte nie diagonal sein (idealerweise - kein großer Fan)
• Im Idealfall würde ich in der Lage, die minimale Lücke in Strichmarkierungen angeben, um das zu vermeiden, oben, so etwas wie 7 Tage

ich habe den folgenden xAxes Setup unter Verwendung von:

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

Und meine Daten sind in "YYYY-MM-DD" Format verbraucht.

Gerade jetzt scheint es zu ignorieren die unitStepSize.

Ein vollständiges Beispiel finden Sie hier: mich mit dem gleichen Problem https://jsfiddle.net/koendirckx/fqhv8cjs/5/

Answer 1

länger Nach dem Kampf, als ich sollte, bemerkte ich schließlich den feinen Druck in der Chartjs Dokumentation bei http://www.chartjs.org/docs/#scales-time-units Der unitStepSize Parameter sein muss definiert in den Zeitunteroptionen.

ich tat:

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 
      }, 

Wenn ich getan haben sollte:

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 
      }, 

In einem breiteren Kontext: (beachten Sie, dass eleChart1 die Leinwand DOM-Element des Diagramms ist, und dass yAchse , Datensätze und Objekte sind chartname/Variablen außerhalb des Beispiels gebaut.)

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 
      }, 
     } 
    }); 

Fazit: Sobald ich die Option unitStepSize in das Zeitobjekt eingefügt habe, hat es wie erwartet funktioniert.