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

Question

我会将我的普通条形图转换为圆形细条，就像下面的照片一样

我看到很多例子建议绘制/扩展新图表，但我不知道如何在角度框架内做到这一点，这里是一个example。

这是我的实际图形栏：

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没有值打印灰点（但优先级是制作圆角条）

Answer 1

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

var options = {
    cornerRadius: 20,
};

对于像你在照片上的小酒吧，你应该添加qazxsw poi，比你的代码看起来像：

barPercentage