Question

我正在尝试创建一个仅显示x轴的“图表”。基本上，我试图创建可视化范围（最小值-最大值）和一个介于两者之间的点：

我无法在网上找到任何有关如何进行此操作或此类绘图的资源。如果有人可以帮忙，那就太棒了！

Answer 1

通过适当地设置line图表的样式并使用linear x和y轴以及通过x and y coordinates定义的点来实现这一点很简单。

通过将y保持在0，可以确保所有点都出现在相同的水平位置。

以下示例获得了所需的视觉效果，但您可能希望通过callback禁用“假” x轴线的工具提示：

let range = {
    min: 0,
    max: 100
  },
  pointVal = 65;

new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: ["", "", ""],
    datasets: [{
      pointBackgroundColor: "green",
      pointRadius: 10,
      pointHoverRadius: 10,
      pointStyle: "rectRot",
      data: [{
        x: pointVal,
        y: 0
      }]
    }, {
      // this dataset becomes the 'fake' x-axis line.
      pointBackgroundColor: "black",
      borderColor: "black",
      data: [{
          x: range.min,
          y: 0
        },
        {
          x: range.max / 2,
          y: 0
        },
        {
          x: range.max,
          y: 0
        }
      ]
    }]
  },
  options: {
    legend: {
      display: false
    },
    hover: {
      mode: "point"
    },

    layout: {
      padding: {
        left: 10,
        right: 10,
        top: 0,
        bottom: 0
      }
    },
    scales: {
      xAxes: [{
        type: "linear",
        display: false
      }],
      yAxes: [{
        display: false
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="width:200px">
  <canvas id="chart"></canvas>
</div>

有没有一种方法可以只用一个轴创建图表？

1 个答案: