ng2-charts 带有 x 和 y 轴值的折线图

Question

我正在尝试使用 ng2-charts 显示具有一组 x 和 y 值的函数。目前它不能正确显示我的价值观。

我的（示例）数据集是：

chartDataSet: ChartDataSets[] = [ {
data: [
  { x: 5, y: 7 },
  { x: 10, y: 24 },
  { x: 15, y: 11 },
  { x: 20, y: 57 },
  { x: 25, y: 4 }]}];

正如您所看到的，它只显示前两个点，但 y 轴标签正确缩放到 60，因此它似乎可以识别所有点。另外，我希望在 x 轴上也有 y 轴上的标签。

我的组件如下所示：

lineChartOptions: ChartOptions = {
responsive: true,
};
chartDataSet: ChartDataSets[] = [ {
 data: [
  { x: 5, y: 7 },
  { x: 10, y: 24 },
  { x: 15, y: 11 },
  { x: 20, y: 57 },
  { x: 25, y: 4 }]}];
lineChartType: ChartType = 'line';

我的 HTML 是这样的：

 <canvas baseChart
                      [datasets]="chartDataSet"
                      [options]="lineChartOptions"
                      [chartType]="lineChartType">
              </canvas>

有什么建议如何解决这个问题吗？提前致谢

Answer 1

演示您需要缩放 x 轴才能在折线图中使用 x 和 y 坐标

 lineChartOptions: ChartOptions = {
    responsive: true,
    scales: {
        xAxes: [{
            type: 'linear',
            position: 'bottom'
        }]
    }
  };