Chart.js-填充文本仅在悬停在甜甜圈的一部分上时出现

西蒙·普莱斯(Simon Price)

我正在使用Chart.js,遇到一个需要帮助的问题。

甜甜圈已正确创建并显示了我需要的信息,但是,当我将鼠标悬停在图表的一个方面时,它仅显示填充文本值。

这是我正在使用的代码

options = {
    cutoutPercentage: 75,
    rotation: Math.PI,
    //circumference: Math.PI * values[0],
    //segmentShowStroke: false,
    animation: {
        animateScale: true,
        onComplete: function () {
            var width = this.chart.width,
                height = this.chart.height;

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

            var text = "82%",
                textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
                textY = height / 2;
            console.log(RpData);
            this.chart.ctx.fillText(RpData.datasets[0].data[0] + "%", textX, textY);
        }
    },

    legend: {
        display: false,
    },
    tooltips: {
        enabled: false,
    },

};

$('#riskFactorChartLoading').hide("fast");
var ctx = $("#riskFactorChart").get(0).getContext("2d");

var riskFactorChart = new Chart(ctx, {
    type: 'doughnut',
    data: RpData,
    options: options
});

看起来像这样;

在此处输入图片说明

我想要实现的是看到鼠标悬停的结果,而不必将鼠标悬停在它上面以查看我的值。

谢谢

德拉瓦尔

请提供您的完整代码。因为在代码中没有给出“ RpData”。

这是jsfiddle链接,可以正常工作,但是由于您未获得指向完整代码段或代码的任何链接,因此我们无法检查问题所在...

Chart JS snippet - (dkrvl2011)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Chart.js圆角甜甜圈

Chart.JS:当甜甜圈大小足以容纳文本时,如何仅显示数据标签?

如何在Chart.JS的半个甜甜圈图中添加一些文本?

chart.js:甜甜圈图中的标签

Chart.js甜甜圈图大小调整

chart.js中的甜甜圈图调整问题

图表中的chart.js 甜甜圈图例

Chart.js 2.0甜甜圈工具提示百分比

Chart.js:甜甜圈中间的千位分隔符和标题

如何使用Chart.js在甜甜圈图中添加文本?

Chart.js使用文本工具提示问题扩展了甜甜圈

如何使用Chart.js在甜甜圈图的中心添加文本?

Chart.js v2:甜甜圈内甜甜圈之间的空间

Javascript和Chart.JS-在3个甜甜圈孔图中获得唯一文本的问题-为所有3个甜甜圈孔显示相同的文本

D3.js将鼠标悬停在甜甜圈图中的文本

重绘旧的甜甜圈并通过单击每种颜色Chart.js创建一个新的甜甜圈

如何使用Chart.js创建单值甜甜圈或饼图?

Chart.js - 甜甜圈显示活动段工具提示(点击外部按钮)

Chart.js HTML自定义图例问题与甜甜圈图

在Chart.js甜甜圈图上检测onHover是否完成

如何在Chart.js甜甜圈图上显示第二组标签?

使用Chart js插件创建类似甜甜圈图的弧线

如何自定义Chart.js 2.0甜甜圈图的工具提示?

Chart.js甜甜圈动画/顺时针绘制

如何摆脱chart.js甜甜圈图中较大的左右边距?

如何在Chart.js的甜甜圈图中使用径向CanvasGradients?

如何更改chart.js甜甜圈图上的鼠标光标?

如何在Chart.js甜甜圈图中添加第二组标签?

如何添加到chart.js(甜甜圈图)的链接?