在Chart.js中绘制单个框架

Question

这是一个简单的问题，我在Chart.js文档中找不到。

如何在散点图中绘制简单的框架？在下面的示例中，我删除了刻度和标签。现在，我只想让它包括一个简单的框架并定义厚度。

var chart = new Chart('chart', {
  type: 'scatter',
  data: {
    // labels: names,
    datasets: [
      {
        data: [{'x':0.1,'y':0.1},{'x':0.4,'y':0.4},{'x':0.8,'y':0.8}]
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    scaleShowLabels: false,
    title: {
        display: false,
    },
    legend: {
        display: false
    },
      scales: {
          yAxes: [{
              display: true,
              gridLines: {
                  display : false
              },
              ticks: {
                  display: false,
                  beginAtZero: true,
                  max:1
              }
          }],
          xAxes: [{
              gridLines: {
                  display : false
              },
              ticks: {
                  display: false,
                  beginAtZero: true,
                  max:1
              },
          }]
      }
  }
});

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

Answer 1

您可以通过定义一些CSS样式在canvas周围绘制边框。

<canvas id="chart" style="border: 2px solid #000000;"></canvas>

与此同时，您需要确保x和y上的图表底线符合画布的限制。可以通过如下定义负号padding来完成此操作：

padding

最后一点是通过定义

layout: {
  padding: {
    left: -10,
    bottom: -10
  }
},

和yAxes.display: false完全隐藏轴。

请在下面查看您的修改后的代码

xAxes.display: false

new Chart('chart', {
  type: 'scatter',
  data: {
    // labels: names,
    datasets: [{
      data: [{ 'x': 0.1, 'y': 0.1 }, { 'x': 0.4, 'y': 0.4 }, { 'x': 0.8, 'y': 0.8 }]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    scaleShowLabels: false,
    layout: {
      padding: {
        left: -10,
        bottom: -10
      }
    },
    title: {
      display: false,
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        display: false,     
        ticks: {
          beginAtZero: true,
          max: 1
        }
      }],
      xAxes: [{
        display: false,
        ticks: {
          beginAtZero: true,
          max: 1
        },
      }]
    }
  }
});

style="border:1px solid #000000;"