Question

这是我的图表选项的样子

options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          type: "time",
          gridLines: {
            display: false
          },
          ticks: {
            padding: 15
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            padding: 22,
            min: 1,
            max: 5,
            stepSize: 1
          },
          position: "left",
          gridLines: {
            drawTicks: false
          }
        }
      ]
    }
  }

如您所见，有一个选项

gridLines: {
            display: false
          },

因此，图表上没有垂直线。

我想做的是在图表末尾（图表右侧）仅添加一条垂直线这是我的现场示例https://codesandbox.io/s/line-chart-with-vanilla-js-and-chartjs-pi9fn?file=/src/index.js

Answer 1

可以解决以下问题：

在图表配置中定义data.labels。给定您的数据，可以通过使用Array.map()提取x对象的data值来完成。

const labels = data.map(o => o.x);

然后，您需要调整xAxis.ticks，以指示Chart.js必须从给定ticks的用户生成labels（包括网格线）（请参阅Tick Source来自Chart.js文档）。

ticks: {
  source: 'labels'            
}

此外，您必须更改xAxis.gridLines的定义。使它们再次显示并改为定义lineWidth。这应该是array中的numbers，用于指定各个网格线的笔划宽度。基本上所有0除最后一个1的{{1}}之外。

number

请查看下面的可运行代码段。

gridLines: {
  lineWidth: labels.map((l, i) => i < labels.length - 1 ? 0 : 1)
}

const data = [
  { x: "1-01", y: 1 },
  { x: "1-07", y: 3 },
  { x: "1-14", y: 2 },
  { x: "1-21", y: 4 },
  { x: "1-28", y: 5 },
  { x: "2-04", y: 1 }
];
const labels = data.map(o => o.x);

new Chart('line-chart', {
  type: "scatter",
  responsive: true,
  maintainAspectRatio: false,
  data: {
    labels: labels,
    datasets: [
      {
        data: data,
        label: "A",
        showLine: true,
        fill: false,
        borderWidth: 4,
        pointRadius: 5,
        tension: 0,
        backgroundColor: "#ffffff",
        borderColor: "red"
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          type: 'time',
          unit: 'day',
          time: {
            parser: 'M-D'
          },
          gridLines: {
            lineWidth: labels.map((l, i) => i < labels.length - 1 ? 0 : 1)
          },
          ticks: {
            source: 'labels',
            padding: 15            
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            padding: 22,
            min: 1,
            max: 5,
            stepSize: 1
          },
          position: "left",
          gridLines: {
            drawTicks: false
          }
        }
      ]
    }
  }
});

如何在chart.js散点图的末尾添加垂直线

1 个答案: