html chart标签,javascript-Chart.js的自定义标签

最新推荐文章于 2024-05-15 23:30:20 发布

黑是真谛

最新推荐文章于 2024-05-15 23:30:20 发布

阅读量501

点赞数

文章标签： html chart标签

这篇博客介绍了如何使用D3.js库来创建一个甜甜圈图，并详细展示了如何添加数据标签，包括如何将数字与图表各部分关联、调整标签位置以及添加标注线。D3.js提供了高度的定制性，虽然学习曲线较陡峭，但能实现更多复杂的图表效果。作者通过示例代码展示了如何从CSV文件读取数据，并动态绘制带有百分比标签的甜甜圈图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何输出此甜甜圈图每个部分的数字并将这些数字连接到图表的每个部分？

如果Chart.js无法实现,那么谁能指出我要允许我执行此操作的图表库？

new Chart(document.querySelector('#chart'), {

type: 'doughnut',

data: {

labels: [

'Red',

'Blue',

'Yellow'

datasets: [{

data: [300, 50, 100],

backgroundColor: [

'#FF6384',

'#36A2EB',

'#FFCE56'

hoverBackgroundColor: [

'#FF6384',

'#36A2EB',

'#FFCE56'

]

}]

options: {

legend: {

display: false

}

});

解决方法:

我发现chartjs很难使用(但是紧要关头).您可以尝试D3,它是高度可定制的.它使用svgs而不是canvas创建图表,因此元素更易于访问和使用.

这是代码,但不会在原地运行,因为它需要带有数据的外部CSV文件,以及用于防止COR错误的Web服务器.这是您数据的CSV(data.csv)：

percentage_label,percentage

19,19

10,10

32,32

39,39

var width = 960,

height = 500,

radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()

.range(["#fdb92e", "#c02f8e", "#1aaaa9", "#ffffff"]);

var arc = d3.svg.arc()

.outerRadius(radius - 70)

.innerRadius(radius - 180);

var pie = d3.layout.pie()

.sort(null)

.value(function(d) { return d.population; });

var svg = d3.select("body").append("svg")

.attr("width", width)

.attr("height", height)

.append("g")

.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

d3.csv("data.csv", type, function(error, data) {

if (error) throw error;

var g = svg.selectAll(".arc")

.data(pie(data))

.enter().append("g")

.attr("class", "arc");

g.append("path")

.attr("d", arc)

.style("fill", function(d) { return color(d.data.percentage_label); })

.style("stroke-width","0px");

g.append("text")

.attr("transform", function(d) {

return "translate(" + ( (radius + 30) * Math.sin( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) + ", " + ( -1 * (radius - 10) * Math.cos( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) +")";})

.attr("dy", ".5em")

.style("fill","#ffffff")

.style("font-size","40px")

.text(function(d) { return (d.data.percentage_label + "%"); });

g.append("circle")

.attr("transform", function(d) {return "translate(" + arc.centroid(d) + ")";})

.attr("r", 5)

.style("fill","#ffffff");

g.append("circle")

.attr("transform", function(d) {return "translate(" + ( (radius - 20) * Math.sin( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) + ", " + ( -1 * (radius - 50) * Math.cos( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) +")";})

.attr("r", 5)

.style("fill","#ffffff");

function lineCoordinates(d,x) {

/* x: coordinate to return */

//not the most efficient method

var pa = [];

var p1 = arc.centroid(d);

pa.push(p1[0]);

pa.push(p1[1]);

pa.push( (radius - 20) * Math.sin( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) );

pa.push( -1 * (radius - 50) * Math.cos( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) );

return pa[x];