为什么我的数据集不能使用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 
      } 
     }] 
    } 
};