围绕折线图中的单个点画一条线

Question

我正在创建一个折线图，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, 0, 0.3)"

      }
    ]
  }
});

Answer 1

我找到了解决办法，希望对大家有帮助。

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

/**
 * 
 * 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);
  }
}

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

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

围绕折线图中的单个点画一条线

Draw a line around a single point in the linechart

javascript

reactjs

chart.js

react-chartjs

react-chartjs-2