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

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

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

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

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

ng2-charts line chart with x and y axis value

ng2-charts

angular