javascript ChartJS中条形图的边框半径

x33g5p2x 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(148)

我正在使用ng2-chart创建堆叠条形图，ng2-chart是ChartJs的Angular-2版本。
我试图创建条形图与边界-半径中提到的附加图像，但无法找到选项来实现这一点，
请告诉我怎么弄到这个。
我的代码：

public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: false,
    scales: {
      xAxes: [{
        stacked: true
      }],
      maxBarThickness: 5,
      yAxes: [{
        stacked: true
      }],

    },
    barThickness:20,
    legend: {
      display: true,
      position: 'right',
      labels: {
          fontColor: '#fff'
      }
  }

  };


<canvas baseChart style="height:350px; width:1150px;" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
[colors]="lineChartColors" [chartType]="barChartType">
 </canvas>

JavaScript

来源：https://stackoverflow.com/questions/46688812/border-radius-for-the-bar-chart-in-chartjs

1条答案

按热度按时间

gcxthw6b1#

使用chart.js版本3，您可以使用borderRadius属性轻松配置此属性。在编写此答案时，您需要安装ng2-charts的next分支，因为它是使用chart.js版本3的第7个候选版本

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'pink',
      borderRadius: Number.MAX_VALUE,
      borderSkipped: false,
    }]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

赞(0）回复(0）举报 2023-03-06

我来回答

javascript ChartJS中条形图的边框半径

1条答案

相关问题

热门标签

最新问答