javascript - Chartjs 图表只有一个轴

Question

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

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

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

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

我的数据集如下：

{
  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

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

作为替代方案，您可以canvas使用Plugin Core API直接在上绘制数据标签。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', {
  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>

Answer 2

如果您在两个轴上同时定义选项，它应该可以正常工作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>