Javascript 如何为Bar Chart.js v2创建圆角条形图？

正在尝试在本文中找到与提供的中显示的相同的工作方式。这是针对版本1的

在我正在使用的图表中，它无法加载

chart.types.Bar.extend

中对

extend

的引用，导致脚本崩溃

如果使用默认选项，图表不会加载任何问题。我必须将

Chart.types.Bar.extend

放在末尾，才能正确加载默认选项。全屏运行并查看此功能

我尝试用我的Chart.js 2.4.0版本来实现这一点

Chrome报告：

未捕获的TypeError:无法读取未定义的属性“extend” chart.js

这段代码甚至不会在这里运行。为什么会发生这种情况？谁能帮我一下吗

此代码适用于较旧版本的Chart.js 1.0。是否有人可以进一步展示这如何与version Chart.js 2.0配合使用？多谢各位

$（文档）.ready（函数（）{
var myBarChart1=新图表（$（'appBarChart2'u NoRound'）{
类型：'bar'，
数据：dataBar2，
选项：选项栏
});
var ctx=$（“#appBarChart2”）.getContext（“2d”）；
var myBarChart2=新图表（ctx）.BarAlt（dataBarAlt2{
//0（平坦）到1（更弯曲）
曲率：1
});
});
var dataBarAlt2={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“1A9BFC”，
strokeColor:#1A9BFC“，
数据：[65,59,80,81,56,55,40]，
}
]
};
var dataBar2={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
背景颜色：“#1A9BFC”，
边框颜色：“#1A9BFC”，
边框宽度：1，
数据：[65,59,80,81,56,55,40]，
}
]
};
var选项栏=
{
比例：{
xAxes：[{
对,，
巴特希克内斯：20岁，
网格线：{
显示：假，
}
//百分比：0.5，
}],
雅克斯：[{
对,，
//百分比：0.5，
}]
},
图例：{
显示：假，
//位置：'左'
}
};
Chart.types.Bar.extend({
姓名：“巴拉特”，
初始化：函数（数据）{
Chart.types.Bar.prototype.initialize.apply（这是参数）；
如果（this.options.curvature！==undefined&&this.options.curvature您尝试使用的代码实际上用于chart.js v1，并且正如您所发现的，不适用于chart.js v2（这几乎是完整的chart.js重写）

为了在chart.js v2中获得相同的结果，您需要扩展
chart.elements.Rectangle
并覆盖它的
draw
方法，以便绘制圆角顶部。已经有一个chart.js helper方法可以绘制圆角矩形（
chart.helpers.drawRoundedRectangle
），因此我们将稍微修改它，并创建一个新的辅助方法，该方法将只绘制一个圆形的顶部（而不是所有边）

接下来，您还必须扩展条形图控制器（
chart.controllers.bar
）并覆盖
dataElementType
，以便为图表使用新的“圆角矩形”，而不是常规矩形

Chart.defaults.roundedBar = Chart.helpers.clone(Chart.defaults.bar);

Chart.controllers.roundedBar = Chart.controllers.bar.extend({
  dataElementType: Chart.elements.RoundedTopRectangle
});

最后，我们将修改图表的配置以使用上面创建的新图表类型，并添加一个名为
barRoundness
的新选项属性来控制顶部的圆度（0为平面，1为半圆）

您可以在这里看到一个完整的工作示例

此外，如果您想要稍微不同的“圆形顶部”外观，这里有另一个使用不同方法绘制顶部（一条二次曲线）。
以下仅自定义
图表.elements.Rectangle.prototype.draw
-无需创建全新的图表类型

其他优点：


它适用于垂直和水平条形图
它适用于垂直和水平堆叠的条形图-它只对系列中的最后一个方框进行四舍五入


注意到的问题：因为这只对最后一个数据集中的方框进行四舍五入，如果最后一个数据集中的数据点的值<之前的任何一个数据点，则视觉上最顶部的方框将不会四舍五入。
但是，如果最后一个数据点是负数，并且是最小值，则它将在底部拐角处使该框变圆

信用证：原始代码属于。下面的代码和链接的fiddle演示了在每个堆栈的每个数据集中增加正值，并修改了一些默认半径选项


/**自定义矩形。原型绘制方法**/
Chart.elements.Rectangle.prototype.draw=函数（）{
var ctx=此值。\u chart.ctx；
var vm=此视图；
变量左、右、上、下、signX、signY、borderSkipped、radius；
var borderWidth=vm.borderWidth；
//如果半径小于0或大到足以导致图形错误，则最大
//半径是强制的。如果未定义拐角半径，则将其设置为0。
var cornerRadius=此。_chart.config.options.cornerRadius；
var fullCornerRadius=此。_chart.config.options.fullCornerRadius；
var stackedRounded=this.\u chart.config.options.stackedRounded；
var typeOfChart=this.\u chart.config.type；
如果（转弯半径<0）{
转弯半径=0；
}
如果（拐角半径的类型==“未定义”）{
转弯半径=0；
}
如果（fullCornerRadius的类型==“未定义”）{
fullCornerRadius=假；
}
如果（stackedRounded的类型=='undefined'）{
stackedRounded=false；
}
如果（！vm.horizontal）{
//酒吧
左=vm.x-vm.width/2；
右=vm.x+vm.width/2；
top=vm.y；
bottom=vm.base；
signX=1；
符号Y=底部>顶部？1:-1；
borderSkipped=vm.borderSkipped | | |“bottom”；
}否则{
//单杠
左=vm.base；
右=vm.x；
top=vm.y—vm.height/2；
底部=vm.y+vm.heigh
Chart.defaults.roundedBar = Chart.helpers.clone(Chart.defaults.bar);

Chart.controllers.roundedBar = Chart.controllers.bar.extend({
  dataElementType: Chart.elements.RoundedTopRectangle
});

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'roundedBar',
  data: {
    labels: ["Car", "Bike", "Walking"],
    datasets: [{
      label: 'Students',
      backgroundColor: chartColors.blue,
      data: [
        randomScalingFactor(), 
        randomScalingFactor(), 
        randomScalingFactor(), 
      ]
    }, {
      label: 'Teachers',
      backgroundColor: chartColors.red,
      data: [
        randomScalingFactor(), 
        randomScalingFactor(), 
        randomScalingFactor(), 
      ]
    }, {
      label: 'Visitors',
      backgroundColor: chartColors.green,
      data: [
        randomScalingFactor(), 
        randomScalingFactor(), 
        randomScalingFactor(), 
      ]
    }]
  },
  options: {
    responsive: true,
    barRoundness: 1,
    title: {
      display: true,
      text: "Chart.js - Bar Chart with Rounded Tops (drawRoundedTopRectangle Method)"
    },
  }
});

import 'chartjs-top-round-bar';

new Chart('myChart', 
{ 
    options: { 
        barRoundness: 0.3
    }
}

Chart.helpers.merge(Chart.defaults.global, {
    datasets: {
        roundedBar: {
            categoryPercentage: 0.8,
            barPercentage: 0.9
        }
    }
});

Chart['elements'].Rectangle.prototype.draw = function() {
    
    let ctx = this._chart.ctx;
    let view = this._view;

    //////////////////// edit this to change how rounded the edges are /////////////////////
                                    let borderRadius = 10;


    let left = view.x - view.width / 2;
    let right = view.x + view.width / 2;
    let top = view.y;
    let bottom = view.base;

    ctx.beginPath();
    ctx.fillStyle = view.backgroundColor;
    ctx.strokeStyle = view.borderColor;
    ctx.lineWidth = view.borderWidth;

    let barCorners = [
        [left, bottom],
        [left, top],
        [right, top],
        [right, bottom]
    ];

    //start in bottom-left
    ctx.moveTo(barCorners[0][0], barCorners[0][1]);

    for (let i = 1; i < 4; i++) {
        let x = barCorners[1][0];
        let y = barCorners[1][1];
        let width = barCorners[2][0] - barCorners[1][0];
        let height = barCorners[0][1] - barCorners[1][1];

        
        //Fix radius being too big for small values
        if(borderRadius > width/2){
            borderRadius = width/2;
        }
        if(borderRadius > height/2){
            borderRadius = height/2;
        }



        // DRAW THE LINES THAT WILL BE FILLED - REPLACING lineTo with quadraticCurveTo CAUSES MORE EDGES TO BECOME ROUNDED
        ctx.moveTo(x + borderRadius, y);
        ctx.lineTo(x + width - borderRadius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
        ctx.lineTo(x + width, y + height - borderRadius);
        ctx.lineTo(x + width, y + height, x + width - borderRadius, y + height);
        ctx.lineTo(x + borderRadius, y + height);
        ctx.lineTo(x, y + height, x, y + height - borderRadius);
        ctx.lineTo(x, y + borderRadius);
        ctx.quadraticCurveTo(x, y, x + borderRadius, y);

    }
    //FILL THE LINES
    ctx.fill();
}; 

ngOnInit() {
console.log("asdf entering getChart");
this.canvas = document.getElementById('NumberOfSessionsChart');
this.ctx = this.canvas.getContext('2d');

this.myChart = new Chart(this.ctx, {
  type: 'bar',
  data: {
    labels: ['Jan 20', 'Feb 20', 'Mar 20', 'Apr 20', 'May 20', 'Jun 20', 'Jul 20', 'Aug 20', 'Sept 20'],
    datasets: [{
      label: 'vVals',
      backgroundColor: 'blue',
      data: [0, 50, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    }]
  },
  options: {
    devicePixelRatio: 2.2,
    //tooltips are the things that appear when you hover over the data that show the counts.
    //for some reason we can't choose where the tooltip is oriented.
    tooltips: {
        enabled: false
    },
    onClick: (e) => {
        console.log("asdf entering on click");  
    },
    
    legend: {
        display: true,
        position: 'right',
        reverse: true,
        labels: {
            fontColor: 'black',
            fontSize: 15,
            padding: 20,
            usePointStyle: true,
            //width of circles in legend
            boxWidth: 9
        }
    },
    scales: {
        
        xAxes: [{  
            ticks: {
                padding: 10,
                fontSize: 13,
                fontFamily: 'Roboto',
                fontColor: 'black',
                beginAtZero: true
            },
               gridLines: {
                tickMarkLength: 0,
                color: '#9da0a2',
                drawOnChartArea: false,
               },
        }],
        yAxes: [{ 
            ticks: {
                padding: 10,
                fontSize: 13,
                fontFamily: 'Roboto',
                fontColor: 'black',
                beginAtZero: true,
                precision:0
            },
               gridLines: {
                tickMarkLength: 0,
                color: '#9da0a2',
                drawOnChartArea: false,
               },
        }],
      },
    responsive: false,
}
});



    }
}