只有一个轴的 Chartjs 图表

Question

Chartjs 没有网格、轴和刻度标签的折线图。

我想绘制类似上面的图表。

我不想要坐标轴标签、刻度标签和网格线，只有一条线会随着数据（X 值）添加到图表而在右侧前进。我想在添加到图表的点上显示标签。我们可以在图表中只有一个轴 (X) 吗？

我的数据集如下：

{
  data: [{x:1, y:0}, {x:2, y:0}, {x:3, y:0}],
  showLine: true,  
  borderWidth: 1.5,
  borderColor: "blue",
  pointBackgroundColor: "blue",
  pointBorderColor: "blue",
  pointRadius: 5,
}

Answer 1

如果您在两个轴上同时定义选项 ticks.display: false 和 gridLines.display: false，它应该可以正常工作。

请查看下面的示例代码，看看它是如何工作的。

new Chart('line-chart', {
  type: "line",
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7],
    datasets: [{
      data: [0, 0, 0, 0, 0, 0, 0],
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,      
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: 4,
      pointHoverRadius: 4,
    }],
  },
  options: {
    plugins: {
      datalabels: {
        align: 'top',
        formatter: function(value, context) {
          return context.dataIndex + 1;
        }
      }
    },
    layout: {
      padding: {
        right: 10
      }
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{        
        ticks: {
          display: false
        },
        gridLines: {
          display: false,
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          display: false
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="line-chart" height="30"></canvas>

Answer 2

根据 User7723337 的评论，插件 chartjs-plugin-datalabels 不适用于 Chart.js 版本 3.0.0-beta.7。

作为替代方案，您可以使用 Plugin Core API. The API offers a number of hooks that can be used to perform custom code. In your case, you could use the afterDraw hook together with CanvasRenderingContext2D.

直接在 canvas 上绘制数据标签

Note that I linked Plugin Core API with the Chart.js v2.x documentation because I couldn't find a corresponding section for v3.x. Apparently however, this is still also working with v3.x.

请查看以下使用 Chart.js 版本 3.0.0-beta.7 的代码。

new Chart('line-chart', {
  type: "line",
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x'];
      var yAxis = chart.scales['y'];      
      chart.data.labels.forEach((l, i) => {
        var x = xAxis.getPixelForTick(i);
        var y = yAxis.getPixelForValue(0);
        ctx.textAlign = 'center';
        ctx.font = '12px Arial';
        ctx.fillText(l, x, y - 14);
      });
      ctx.restore();
    }
  }],
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7],
    datasets: [{
      data: [0, 0, 0, 0, 0, 0, 0],
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: 4,
      pointHoverRadius: 4,
    }],
  },
  options: {
    layout: {
      padding: {
        left: 10,
        right: 10
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    },    
    scales: {
      y: {
        display: false,
      },
      x: {
        display: false,
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.7/chart.min.js"></script>
<canvas id="line-chart" height="30"></canvas>

只有一个轴的 Chartjs 图表

Chartjs chart with only one axis

javascript

chart.js

chart.js3