如何用角Google图表制作圆角钢筋

Question

我正在为其中一个应用程序使用angular-google-charts，并且我需要开发一个带有圆角的柱形图。

有没有一种方法可以通过angular-google-charts

来实现

。ts文件

export class ColumnChartComponent implements OnInit {

  title = 'Population (in millions)';
  type = 'ColumnChart';
  data = [
    ["2012", 900, 390],
    ["2013", 1000, 400],
    ["2014", 1170, 440],
    ["2015", 1250, 480],
    ["2016", 1530, 540]
  ];
  columnNames = ['Year', 'Asia', 'Europe'];
  options = {
    hAxis: {
      title: 'Year'
    },
    vAxis: {
      minValue: 0
    },
    isStacked: true
  }

  width = 550;
  height = 400;

  constructor() { }

  ngOnInit(): void {
  }

}

。HTML文件（模板文件）

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

Answer 1

使用下面的代码...并检查jsfiddle http://jsfiddle.net/0dzp3jxw/

 <canvas id="myChart" height="300" width="800"></canvas>

 Chart.types.Bar.extend({
 name: "BarAlt",
 initialize: function (data) {
    Chart.types.Bar.prototype.initialize.apply(this, arguments);

    if (this.options.curvature !== undefined && this.options.curvature <= 1) {
        var rectangleDraw = this.datasets[0].bars[0].draw;
        var self = this;
        var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.5;

        // override the rectangle draw with ours
        this.datasets.forEach(function (dataset) {
            dataset.bars.forEach(function (bar) {
                bar.draw = function () {
                    // draw the original bar a little down (so that our curve brings it to its original position)
                    var y = bar.y;
                    // the min is required so animation does not start from below the axes
                    bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                    // adjust the bar radius depending on how much of a curve we can draw
                    var barRadius = (bar.y - y);
                    rectangleDraw.apply(bar, arguments);

                    // draw a rounded rectangle on top
                    Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                    ctx.fill();

                    // restore the y value
                    bar.y = y;
                }
            })
        })
    }
    }
 });

 var lineChartData = {
 labels: ["January", "February", "March", "April", "May", "June"],
 datasets: [
     {
        fillColor: "#79D1CF",
        strokeColor: "#79D1CF",
        data: [60, 80, 81, 56, 55, 40]
    },
    {
        fillColor: "#D1CF79",
        strokeColor: "#D1CF79",
        data: [4, 5, 10, 1, 2, 3]
    }
   ] 
 };

 var ctx = document.getElementById("myChart").getContext("2d");
 var myLine = new Chart(ctx).BarAlt(lineChartData, {
 // 0 (flat) to 1 (more curvy)
 curvature: 1
 });