javascript - 我们可以减少图表条之间的差距吗？

Question

我使用了chart.js 水平条。下面是我的代码。我想减少图像中 2 条中突出显示的间隙。

让 chartOptions = { responsive: true, responsiveAnimationDuration: 1, maintainApectRatio: true, aspectRatio: 1, legend: false, tooltips: { enabled: false }, gridlines: false, scales: { xAxes: [ { ticks: { display: false } ，堆叠：假，gridLines：{显示：假，drawBorder：假}}]，yAxes：[{刻度：{显示：假}，堆叠：真，barPercentage：0.7，categoryPercentage：0.5，gridLines：{显示：假， drawBorder: false } } ] }, 动画: { onComplete: this.generateImage, onProgress() { const chartInstance = this.chart; 常量 ctx = chartInstance.ctx; 常量数据集 = this.data.datasets[0]; 常量元 = chartInstance.controller.getDatasetMeta(0);

        Chart.helpers.each(
          meta.data.forEach((bar, index) => {
            const value = this.data.datasets[0].data[index] + "%";
            const label = this.data.labels[index];
            const labelPositionX = 14;
            const labelWidth =
              ctx.measureText(label).width + labelPositionX;

            ctx.textBaseline = "middle";
            ctx.textAlign = "left";
            ctx.fillStyle = "#333";
            ctx.fillText(label, labelPositionX, bar._model.y);
            ctx.fillText(value, 170, bar._model.y);
          })
        );
      }
    }
  };

  let ctx = document.getElementById("myChart_fdsSubmission");

  let myChart = new Chart(ctx, {
    type: "horizontalBar",
    data: {
      labels: ["Submitted Courses", "Not Submitted Courses"],
      datasets: [
        {
          label: "%",
          data: [
            // this.fdSubmittedCoursesPercentageVal,
            // this.fdNotSubmittedCoursesPercentageVal
            // // , this.fdiaPercentageVal
            10, 5
          ],
          backgroundColor: "#6db4e0"
        },
        {
          label: "Complete",
          data: [
            100 - this.fdSubmittedCoursesPercentageVal,
            100 - this.fdNotSubmittedCoursesPercentageVal
            // 100 - this.fdiaPercentageVal
          ],
          backgroundColor: "#e7e7e7",
          borderColor: "#e7e7e7",
          hoverBackgroundColor: "#e7e7e7",
          hoverBorderColor: "#e7e7e7"
        }
      ]
    },
    options: chartOptions
  });
  this.chart = myChart;
},

还如何在栏上方放置标签，即已提交和未提交的课程

标签： javascriptchart.js