Chartjs 图表只有一个轴

问题描述

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

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

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

我确实尝试过：
https://jsfiddle.net/Lxya0u98/2/

我的数据集如下：

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

解决方法

如果您在两个轴上同时定义选项 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],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>

,

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

作为替代方案，您可以使用 Plugin Core API 直接在 canvas 上绘制数据标签。 API 提供了许多可用于执行自定义代码的钩子。在您的情况下，您可以将 afterDraw 钩子与 CanvasRenderingContext2D 一起使用。

请注意，我将 Plugin Core API 与 Chart.js v2.x 文档联系起来，因为我找不到 v3.x 的相应部分。显然，这仍然适用于 v3.x。

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

new Chart('line-chart',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();
    }
  }],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>