使用 Angular 和 chartJS 创建圆角条形图

Question

我会将我的普通条形图表转换为与下面的照片完全相同的圆形细条

我看到许多示例建议绘制/扩展新图表，但我不知道如何在 angular 框架内执行此操作，这是一个示例。

这是我的实际图形栏：

const ctx = this.myChart.nativeElement.getContext('2d');
this.myChartBis = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: this.labels,
    datasets: [{
      label: 'test',
      showLine: true,
      lineTension: 0,
      data: this.data,
      fill: false,
      pointBorderColor: '#cd0037',
      pointBackgroundColor: '#ffffff',
      borderColor: [
        '#747678',
      ],
      borderWidth: 0
    }
    ],
  },
  options: {
    showLines: true,
    legend: {
      display: false,
    },
    responsive: true,
    maintainAspectRatio: true,
    tooltips: {
      yPadding: -2,
      xPadding: 10,
      footerMarginTop: 5,
      titleFontColor: 'rgba(0, 0, 255, 0.0)',
      displayColors: false,
      borderWidth: 1,
      bodyFontSize: 16,
      bodyFontFamily: 'Avenir',
      backgroundColor: '#FFF',
      borderColor: '#d7d7d7',
      bodyFontColor: '#0088ce',
    scales: {
      yAxes: [{
        display: false,
        gridLines: {
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 5,
          display: true,
          autoSkip: false,
          min: 0,
          max: 100,
        }
      }],
      xAxes: [{
        display: false,
        gridLines: {
          display: false
        },
        ticks: {
          beginAtZero: true,
          autoSkip: false,
          callback: (value: any) => {
              return value;
          }
        }
      }]
    }
  }
});

我期望的是像照片中那样带有额外条件的圆条：id no value 打印一个灰点（但优先级是制作圆条）

Answer 1

您可以使用已经提到的内容https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts。您需要做的是添加这两个文件Chart.roundedBarCharts.js（Chart.roundedBarChart.min.js只需将它们复制到项目文件夹中，然后包含它们）。然后，在包含此内容后，您可以使用：

var options = {
    cornerRadius: 20,
};

对于像照片上这样的小条，您应该添加barPercentage，那么您的代码将如下所示：

var options = {
    cornerRadius: 20,
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
};