相关疑难解决方法(0)

我使用下面的代码在chart.js中创建了一个条形图.但是我想给条形圆角而不是条形顶部的边角.我无法使用chart.js的全局设置找到任何方法.有没有办法达到我想要的效果？

var barContext = document.getElementById("canvas").getContext("2d");

var barGradientFirst = barContext.createLinearGradient(0, 0, 0, 450);
barGradientFirst.addColorStop(0, 'rgba(112,122,157, 0.1)');   
barGradientFirst.addColorStop(1, 'rgba(112,122,157, 1)');

var barGradientSecond = barContext.createLinearGradient(0, 0, 0, 450);
barGradientSecond.addColorStop(0, 'rgba(151,122,208, 0.1 )');  
barGradientSecond.addColorStop(1, 'rgba(151,122,208, 1)');


var barChartData = {
labels: ["High", "Med", "Low", "None"],
datasets : [
    {
        fillColor : barGradientFirst,
        strokeColor: "rgb(112,122,200)",
        data: [30, 40, 70, 90]
    }, {
        fillColor : barGradientSecond,
        strokeColor: "rgba(220,100,80,0.8)",
        data: [50, 60, 65, 20]
    }]  
};

new Chart(barContext).Bar(barChartData, {
    responsive : true,
    scaleOverride : true,
    scaleBeginAtZero : …

有没有办法为chart.js 甜甜圈图实现动画指标？我想要完成的事情是这样的：

我已经完成了图表的甜甜圈部分，但似乎无法找到添加值（大文本：89%（动态））或指标点的方法。

我使用的代码如下：

HTML

<canvas id="dashboardChart" width="400" height="400"></canvas>

JS

var ctx = document.getElementById("dashboardChart");
    var dashboardChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Red", "Orange", "Green"],
            datasets: [{
                label: '# of Votes',
                data: [33, 33, 33],
                backgroundColor: [
                    'rgba(231, 76, 60, 1)',
                    'rgba(255, 164, 46, 1)',
                    'rgba(46, 204, 113, 1)'
                ],
                borderColor: [
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)',
                    'rgba(255, 255, 255 ,1)'
                ],
                borderWidth: 5
            }]

        },
        options: {
            rotation: 1 * Math.PI,
            circumference: 1 …

我想在这里尝试类似于这篇文章的圆角,但结合中心的文字,到目前为止我有下面的代码,但我不知道如何结合这两个想法

任何帮助,将不胜感激!

图像如下图所示,甜甜圈带有文字图像:

我的代码如下,以生成甜甜圈内的文本.

Chart.types.Doughnut.extend({
   name: "DoughnutTextInside",
   showTooltip: function() {
       this.chart.ctx.save();
       Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
       this.chart.ctx.restore();
},
draw: function() {
    Chart.types.Doughnut.prototype.draw.apply(this, arguments);

    var width = this.chart.width,
        height = this.chart.height;

    var fontSize = (height / 114).toFixed(2);
    this.chart.ctx.font = fontSize + "em Lato";
    this.chart.ctx.textBaseline = "middle";

    var text = "40%",
        textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
        textY = height / 2;

    this.chart.ctx.fillText(text, textX, textY);
   }
});

var data = [{
   label: "Wins %",
   value: 120,
   color: "#2ecc71"
}, {
   label: "Losses …

我有一个包含多个数据集的常规 Chartjs 圆环图，对数据集使用以下代码：

datasets: 
    [
        {
            label: 'Bugs',
            data: [ 60 , 6.6666666666667 , 33.333333333333 ],
            backgroundColor: ['#25CFE4', '#92E7F1', '#eeeeee'],
        }, {
            label: 'Fixes',
            data: [ 60 , 0.44444444444444 , 39.555555555556 ],
            backgroundColor: ['#514463', '#8C75AB', '#eeeeee'],
        }, {
            label: 'Redesigns',
            data: [
            33.333333333333 , 10.37037037037 , 56.296296296296 ],
            backgroundColor: ['#1B745F', '#40C1A0', '#eeeeee'],
        }
    ]
};

我正在尝试在秤上实现圆形边缘，我成功地完成了第一轮，但其他轮则没有运气。

基本上，这就是我现在所拥有的

这就是我想要实现的目标（对不起可怜的Photoshop）

我不介意刻度的开头是否也是圆形的，或者灰色区域（我将其涂成灰色只是为了给人一种尚未填充的印象）气体边缘也是圆形的。

谢谢