在折线图中的一个点周围画一条线

问题描述

我正在创建一个折线图，x 轴为月份，y 轴为值。问题是当只有一个数据点时，它周围没有线。我能够使用注释插件绘制一条水平线，但是当值 > 0 时，我不知道如何绘制一条线，因为它应该是一条曲线。

export const optionsMap = () => ({
  maintainAspectRatio: false,responsive: true,legend: {
    display: false
  },elements: {
    topLabel: {}
  },layout: {
    padding: {
      top: 150,right: 45,left: 40,bottom: 5,}
  },plugins: {
    centerText: false,datalabels: false,},annotation: {
    drawTime: 'beforeDatasetsDraw',annotations: [
      {
        type: 'line',scaleID: 'y-axis-0',value: 0.01,mode: "horizontal",borderColor: "#347aeb",borderWidth: 2,backgroundColor: "rgba(255,0.3)"

      }
    ]
  }
});

解决方法

我找到了一个解决方案，希望这对某人有所帮助。

基本上我们可以在我们拥有的单个数据点周围添加样本点。我做了一个函数，它基本上填充样本点以便在它周围画一条线。

/**
 * 
 * The data points needed to draw a chart around 
 * a single point. 
 */

const padDataPoints = (data,padValue) => {
  for (let i = 0; i < padValue; i++) {
    data.push(0);
    data.unshift(0);
  }
}

这是一个简单的函数，它在数据点的任一侧添加填充点。

然后我们可以通过将所有填充点的 pointRadius 设为零来使图表 js 中的点消失。