爲什麼我的數據集不能使用Chart.js顯示在線圖上？

Question

我正在嘗試使用Chart.js在網頁上顯示折線圖，該圖表顯示過去5天中特定客戶端的Apple Store和Google Play商店中的下載次數。數據中正確顯示，但不正確地與此標籤的X軸：

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

我試圖data場切換到值數組，使得chart.js之會認識我在downloadsChartData定義到標籤：

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

但是，當我進行此更改時，圖表不僅無法正確標記X軸，而且也完全停止在折線圖上顯示數據。

有人可以發現我做錯了嗎？文檔在這個問題上沒有太大的幫助。

Answer 1

在這一點上文檔不是很清楚，但是爲了繪製非數值數據（例如您的情況，其中X軸代表日期），您不能將X軸設置爲具有線性比例。換句話說，如果您使用線性比例設置座標軸，它將繪製數據的數字表示（因此不是標籤）。

我從你的downloadsChartOptions刪除type: 'linear'，它解決了這個問題：

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 
      } 
     }] 
    } 
};