标签: pie-chart

我是d3.js的新手,我正试图用它制作一个饼图.我只有一个问题:我不能在我的弧线外得到我的标签......标签是用arc.centroid定位的

arcs.append("svg:text")
    .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")

谁可以帮我这个？

我正在使用nvd3的piechart.js组件在我的网站上生成一个饼图.提供的.js文件包含几个var,如下所示:

var margin = {top: 30, right: 20, bottom: 20, left: 20}
    , width = null
    , height = null
    , showLegend = true
    , color = nv.utils.defaultColor()
    , tooltips = true
    , tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

在我的内联js中,我已经能够覆盖其中一些变量,比如这样(覆盖showLegend和margin):

var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value }) …

我希望python中的饼图上有小尺寸的标签,以提高可视性,这里是代码

import matplotlib.pyplot as plt

frac=[1.40 , 10.86 , 19.31 , 4.02 , 1.43 , 2.66 , 4.70 , 0.70 , 0.13 , 1.48, 32.96 , 1.11 , 13.30 , 5.86]
labels=['HO0900344', 'HO0900331', 'HO0900332', 'HO0900354', 
'HO0900358', 'HO0900374', 'HO0900372', 'HO0900373', 
'HO0900371', 'HO0900370', 'HO0900369', 'HO0900356', 
'HO0900353', 'HO0900343']

fig = plt.figure(1, figsize=(6,6))
ax = fig.add_subplot(111)
ax.axis('equal')
colors=('b', 'g', 'r', 'c', 'm', 'y', 'burlywood', 'w')
ax.pie(frac,colors=colors ,labels=labels, autopct='%1.1f%%')
plt.show()

谢谢和欢呼

我想复制这个 与R ggplot.我有完全相同的数据:

browsers<-structure(list(browser = structure(c(3L, 3L, 3L, 3L, 2L, 2L, 
2L, 1L, 5L, 5L, 4L), .Label = c("Chrome", "Firefox", "MSIE", 
"Opera", "Safari"), class = "factor"), version = structure(c(5L, 
6L, 7L, 8L, 2L, 3L, 4L, 1L, 10L, 11L, 9L), .Label = c("Chrome 10.0", 
"Firefox 3.5", "Firefox 3.6", "Firefox 4.0", "MSIE 6.0", "MSIE 7.0", 
"MSIE 8.0", "MSIE 9.0", "Opera 11.x", "Safari 4.0", "Safari 5.0"
), class = "factor"), share = c(10.85, 7.35, 33.06, 2.81, 1.58, 
13.12, 5.43, 9.91, 1.42, 4.55, 1.65), …

我使用flot饼图绘制饼图.但它显示了萤火虫的错误

未捕获的异常:绘图的尺寸无效,width = null,height = null

我也从样式表中给出了高度和宽度.并尝试过这样的

<div id="placeholder1" style="width:140px;height:140px" ></div>

怎么解决这个？

我在Stack Overflow中发现了类似的问题,但是所有这些问题都在一年前和两年前得到了解决.现在Chart.js出现在版本2中,并且许多文档都发生了变化.有人可以帮我展示带有标签的饼图示例 - 或者饼图及其所有片段的工具提示是否可见？

UPDATE

感谢@potatopeelings,他的回答非常适合Chart.js v2.1.

虽然我最初询问如何在饼图上永久显示工具提示,但我找到了一个更好的解决方案:以百分比形式显示值作为标签!它现在在Chart.js v2.1中启用了饼图.在图表选项中:

animation: {
  duration: 0,
  onComplete: function () {
    var self = this,
        chartInstance = this.chart,
        ctx = chartInstance.ctx;

    ctx.font = '18px Arial';
    ctx.textAlign = "center";
    ctx.fillStyle = "#ffffff";

    Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
        var meta = self.getDatasetMeta(datasetIndex),
            total = 0, //total values to compute fraction
            labelxy = [],
            offset = Math.PI / 2, //start sector from top
            radius,
            centerx,
            centery, 
            lastend = 0; //prev arc's end line: starting with 0 …

我无法弄清楚如何让flot.pie将标签中显示的数据从"原始数据"的百分比更改为实际数据.在我的例子中,我创建了一个饼图,其中包含已读/未读消息的数量.

读取消息数:50.未读消息数:150.

创建的饼图显示读取消息的百分比为25%.在这个位置我想显示实际的50条消息.见下图:

我用来创建馅饼的代码:

var data = [
    { label: "Read", data: 50, color: '#614E43' },
    { label: "Unread", data: 150, color: '#F5912D' }
];

和:

    $(function () {
        $.plot($("#placeholder"), data,
           {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function (label, series) {
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                        },
                        threshold: 0.1
                    }
                }
            },
            legend: {
                show: false
            }
        });
    });

这可能吗？

在@Ryley的回答中,我找到了一个肮脏的解决方案.当我输出series.data时,返回值"1,150"和"1,50".我想出了减去返回值的前2个字符并显示减去的值的想法.

String(str).substring(2, …

我想在分面饼图上添加数据标签.
也许有人可以帮助我.

我的数据:

year <- c(1,2,1,2,1,2)
prod <- c(1,1,2,2,3,3)
quantity <- c(33,50,33,25,34,25)

df <- data.frame(year, prod, quantity)
rm(year, prod, quantity)

码:

library(ggplot2)

# center's calculated by hand
centr2 <- c(16, 25, 49, 62.5, 81, 87.5)

ggplot(data=df, aes(x=factor(1), y=quantity, fill=factor(prod))) +
    geom_bar(stat="identity") +
    geom_text(aes(x= factor(1), y=centr2, label = df$quantity), size=10) +
    facet_grid(facets = .~year, labeller = label_value) +
    coord_polar(theta = "y")

我的结果是:

如果我删除coord_polar(theta ="y"),我将得到以下图:

现在我很清楚,为什么我的数据标签不匹配.
但我不知道如何解决它.

我读到:
1.在饼图上放置标签
2. 在带有刻面密度的ggplot中添加文本
3. 饼图将其文本放在彼此的顶部

但没有找到答案.

我正在试验Linux上纯静态链接的PIE可执行文件的概念,但是遇到了GNU binutils链接器在使用时坚持在输出二进制文件中添加PT_INTERP头的问题-pie,即使在给出时也是如此-static.有没有办法抑制这种行为？也就是说,有没有办法告诉GNU ld具体不要将某些标题写入输出文件？也许使用链接器脚本？

(请不要回答声称它不起作用;我很清楚该程序仍然需要重定位处理 - 仅由于我的使用而导致的加载地址相对重定位-Bsymbolic- 并且我有特殊的启动代码代替Scrt1.o处理这个问题的标准.但是,如果没有动态链接器已经开始并且正在进行工作,除非PT_INTERP将二进制文件中的标题变为十六进制,否则我无法调用它.)

我有一个圆环图,里面有五个不同的弧形.数据不会更新,但我希望在页面加载时将整个图形转换为圆形,从选定的角度开始(在我的情况下为1.1*PI).这是图的jsfiddle:http://jsfiddle.net/Nw62g/

var data = [
    {name: "one", value: 10375},
    {name: "two", value:  7615},
    {name: "three", value:  832},
    {name: "four", value:  516},
    {name: "five", value:  491}
];

var margin = {top: 20, right: 20, bottom: 20, left: 20};
    width = 400 - margin.left - margin.right;
    height = width - margin.top - margin.bottom;

var chart = d3.select("body")
    .append('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + ((width/2)+margin.left) + "," +
                                      ((height/2)+margin.top) …