如何在chart.js中为饼图添加标签

I am displaying Pie chart. But how to Display labels in pie charts.

我正在显示饼图。但是如何在饼图中显示标签。

Below is the chart.js code for pie chart.

下面是饼图的chart.js代码。

this.Pie = function(data, options) {

  chart.Pie.defaults = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    animation: true,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    onAnimationComplete: null
  };

  var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;

  return new Pie(data, config, context);
};

and below is the code of html file for displaying pie chart

以下是用于显示饼图的html文件的代码

code:

var data = [{
  value: 20,
  color: "#637b85"
}, {
  value: 30,
  color: "#2c9c69"
}, {
  value: 40,
  color: "#dbba34"
}, {
  value: 10,
  color: "#c62f29"
}];

var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);

5 个解决方案

#1

EDIT: http://jsfiddle.net/nCFGL/223/ My Example.

编辑:http://jsfiddle.net/nCFGL/223/我的例子。

You should be able to like follows:

你应该能够喜欢以下内容:

var pieData = [{
    value: 30,
    color: "#F38630",
    label: 'Sleep',
    labelColor: 'white',
    labelFontSize: '16'
  },
  ...
];

Include the Chart.js located at:

包括位于以下位置的Chart.js:

https://github.com/nnnick/Chart.js/pull/35

#2

It is not necessary to use another library like newChart or use other people's pull requests to pull this off. All you have to do is define an options object and add the label wherever and however you want it in the tooltip.

没有必要使用像newChart这样的其他库,或者使用其他人的pull请求来解决这个问题。您所要做的就是定义一个选项对象,并在工具提示中随处添加标签。

var optionsPie = {
    tooltipTemplate: "<%= label %> - <%= value %>"
}

If you want the tooltip to be always shown you can make some other edits to the options:

如果您希望始终显示工具提示,则可以对选项进行其他一些编辑:

 var optionsPie = {
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
            this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>"
    }

In your data items, you have to add the desired label property and value and that's all.

在您的数据项中,您必须添加所需的标签属性和值,这就是全部。

data = [
    {
        value: 480000,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Tobacco"
    }
];

Now, all you have to do is pass the options object after the data to the new Pie like this: new Chart(ctx).Pie(data,optionsPie) and you are done.

现在,您所要做的就是将数据之后的options对象传递给新的Pie,如下所示:new Chart(ctx).Pie(data,optionsPie),您就完成了。

This probably works best for pies which are not very small in size.

这对于尺寸不是很小的馅饼来说效果最好。

Pie chart with labels

饼图与标签

#3

Rachel's solution is working fine, although you need to use the third party script from raw.githubusercontent.com

Rachel的解决方案工作正常,但您需要使用raw.githubusercontent.com中的第三方脚本

By now there is a feature they show on the landing page when advertisng the "modular" script. You can see a legend there with this structure:

到目前为止,在宣传“模块化”脚本时,它们会在着陆页上显示一项功能。您可以在此处看到具有此结构的图例:

<div class="labeled-chart-container">
    <div class="canvas-holder">
        <canvas id="modular-doughnut" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
    </div>

<ul class="doughnut-legend">
    <li><span style="background-color:#5B90BF"></span>Core</li>
    <li><span style="background-color:#96b5b4"></span>Bar</li>
    <li><span style="background-color:#a3be8c"></span>Doughnut</li>
    <li><span style="background-color:#ab7967"></span>Radar</li>
    <li><span style="background-color:#d08770"></span>Line</li>
    <li><span style="background-color:#b48ead"></span>Polar Area</li>
</ul>
</div>

To achieve this they use the chart configuration option legendTemplate

为此,他们使用图表配置选项legendTemplate

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

You can find the doumentation here on chartjs.org This works for all the charts although it is not part of the global chart configuration.

您可以在chartjs.org上找到这里的doumentation。这适用于所有图表,尽管它不是全局图表配置的一部分。

Then they create the legend and add it to the DOM like this:

然后他们创建图例并将其添加到DOM,如下所示:

var legend = myPie.generateLegend();
$("#legend").html(legend);

Sample See also my JSFiddle sample

示例另请参阅我的JSFiddle示例

#4

Use ChartNew.js instead of Chart.js

使用ChartNew.js而不是Chart.js

...

So, I have re-worked Chart.js. Most of the changes, are associated to requests in "GitHub" issues of Chart.js.

所以,我重新修改了Chart.js。大多数更改与Chart.js的“GitHub”问题中的请求相关联。

And here is a sample http://jsbin.com/lakiyu/2/edit

这里有一个示例http://jsbin.com/lakiyu/2/edit

var newopts = {
    inGraphDataShow: true,
    inGraphDataRadiusPosition: 2,
    inGraphDataFontColor: 'white'
}
var pieData = [
    {
        value: 30,
        color: "#F38630",
    },
    {
       value: 30,
       color: "#F34353",
    },
    {
        value: 30,
        color: "#F34353",
    }
]
var pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx).Pie(pieData, newopts);

It even provides a GUI editor http://charts.livegap.com/

它甚至提供了一个GUI编辑器http://charts.livegap.com/

So sweet.

#5

For those using newer versions Chart.js, you can set a label by setting the callback for tooltips.callbacks.label in options.

对于那些使用较新版本Chart.js的用户,可以通过在options中设置tooltips.callbacks.label的回调来设置标签。

Example of this would be:

这样的例子是:

var chartOptions = {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return 'label';
            }
        }
    }
}

#1