Warum werden meine Datasets nicht in Liniendiagrammen mit Chart.js angezeigt?

Question

Ich versuche, ein Liniendiagramm auf einer Webseite mit Chart.js anzuzeigen, die die Anzahl der Downloads in den Apple Store und Google Play Store für einen bestimmten Client für die letzten 5 Tage zeigt. Die Daten erscheinen richtig, wird aber nicht richtig der X-Achse mit diesem Label:

var downloadsChartData = { 
    labels: ["4 Days", "3 Days", "2 Days", "Yesterday", "Today"], 
    datasets: [{ 
     label: "Google Play", 
     fill: false, 
     lineTension: 0, 
     backgroundColor: "rgba(0, 230, 115, 1)", 
     borderColor: "rgba(0, 230, 115, 1)", 
     borderCapStyle: 'butt', 
     borderJoinStyle: 'miter', 
     borderWidth: 2, 
     pointBorderColor: "rgba(150, 75, 75, 1)", 
     pointBorderWidth: 3, 
     pointRadius: 6, 
     pointHoverRadius: 9, 
     pointStyle: 'triangle', 
     data: [{ 
      x: 1, 
      y: 2 
     }, { 
      x: 2, 
      y: 0 
     }, { 
      x: 3, 
      y: 3 
     }, { 
      x: 4, 
      y: 1 
     }, { 
      x: 5, 
      y: 1 
     }] 
    }, { 
     label: "iOS", 
     fill: false, 
     lineTension: 0, 
     backgroundColor: "rgba(26, 117, 255, 1)", 
     borderColor: "rgba(26, 117, 225, 1)", 
     borderCapStyle: 'butt', 
     borderJoinStyle: 'miter', 
     borderWidth: 2, 
     pointBorderColor: "rgba(150, 75, 75, 1)", 
     pointBorderWidth: 3, 
     pointRadius: 6, 
     pointHoverRadius: 9, 
     data: [{ 
      x: 1, 
      y: 4 
     }, { 
      x: 2, 
      y: 2 
     }, { 
      x: 3, 
      y: 0 
     }, { 
      x: 4, 
      y: 1 
     }, { 
      x: 5, 
      y: 4 
     }] 
    }] 
}; 

var downloadsChartOptions = { 
    title: { 
     display: true, 
     text: 'Downloads on Google Play and App Store', 
     fontSize: 30 
    }, 
    scales: { 
     xAxes: [{ 
      scaleLabel: { 
       display: true, 
       abelString: 'Date', 
       fontSize: 20 
      }, 
      type: 'linear', 
      position: 'bottom', 
      gridLines: { 
       display: false 
      } 
     }], 
     yAxes: [{ 
      scaleLabel: { 
       display: true, 
       labelString: 'Downloads', 
       fontSize: 20 
      } 
     }] 
    } 
}; 

var downloadsChart = document.getElementById('downloadsChart').getContext('2d'); 
new Chart(downloadsChart, { 
    type: 'line', 
    data: downloadsChartData, 
    options: downloadsChartOptions 
}); 

ich versuchte, das data Feld zu einem Array von Werten zu wechseln, so dass die Etiketten Chart.js erkennen würde ich in downloadsChartData definierten:

... 
pointStyle: 'triangle', 
data: [2, 0, 3, 1, 1] 
}] 
... 
pointHoverRadius: 9, 
data: [4, 2, 0, 1, 4] 
}] 

Allerdings, wenn ich diese Änderung vornehmen, wird das Diagramm nicht nur nicht richtig um die X-Achsen beschriftet, sondern auch die Daten auf dem Liniendiagramm vollständig mehr angezeigt.

Kann mir bitte jemand auffallen, was ich falsch mache? Die Dokumentation ist in dieser Angelegenheit nicht sehr hilfreich.

Answer 1

Die Dokumentation ist in diesem Punkt nicht sehr klar, aber für die Darstellung nicht numerischer Daten (wie in Ihrem Fall, bei dem die X-Achse ein Datum darstellt) können Sie die X-Achse nicht linear skalieren. Mit anderen Worten, wenn Sie Ihre Achse mit einer linearen Skala festlegen, wird die numerische Darstellung der Daten (und nicht die Beschriftung) grafisch dargestellt.

I entfernt type: 'linear' von Ihrem downloadsChartOptions und es das Problem gelöst .:

var downloadsChartOptions = { 
    title: { 
     display: true, 
     text: 'Downloads on Google Play and App Store', 
     fontSize: 30 
    }, 
    scales: { 
     xAxes: [{ 
      scaleLabel: { 
       display: true, 
       labelString: 'Date', 
       fontSize: 20 
      }, 
      //type: 'linear', 
      position: 'bottom', 
      gridLines: { 
       display: false 
      } 
     }], 
     yAxes: [{ 
      scaleLabel: { 
       display: true, 
       labelString: 'Downloads', 
       fontSize: 20 
      } 
     }] 
    } 
};