如何在chart.js中為餅圖添加標簽

Question

我正在顯示餅圖。 但是如何在餅圖中顯示標簽。

下面是餅圖的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);
};

以下是用於顯示餅圖的html文件的代碼

碼：

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);

Answer 1

沒有必要使用像newChart這樣的其他庫，或者使用其他人的拉取請求來關閉它。 您所要做的就是定義一個選項對象，並在工具提示中隨處添加標簽。

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

如果您希望始終顯示工具提示，您可以對選項進行一些其他編輯：

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

在您的數據項中，您必須添加所需的標簽屬性和值，這就是全部。

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

現在，您所要做的就是將數據之后的options對象傳遞給新的Pie，如下所示： new Chart(ctx).Pie(data,optionsPie) ，您就完成了。

這對於尺寸不是很小的餡餅來說效果最好。

餅圖與標簽

Answer 2

編輯： http ： //jsfiddle.net/nCFGL/223/我的例子。

你應該能夠喜歡以下內容：

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

包括位於以下位置的Chart.js：

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

Answer 3

Rachel的解決方案工作正常，但您需要使用raw.githubusercontent.com中的第三方腳本

到目前為止，在宣傳“模塊化”腳本時，它們會在着陸頁上顯示一項功能。 您可以在此處看到具有此結構的圖例：

<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>

為此，他們使用圖表配置選項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>"

你可以在chartjs.org上找到這里的doumentation。這適用於所有的圖表，雖然它不是全局圖表配置的一部分 。

然后他們創建圖例並將其添加到DOM，如下所示：

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

示例請參閱我的JSFiddle示例

Answer 4

使用ChartNew.js而不是Chart.js

...

所以，我重新開發了Chart.js。 大多數更改都與Chart.js的“GitHub”問題中的請求相關聯。

這里有一個示例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);

它甚至提供了一個GUI編輯器http://charts.livegap.com/

如此甜蜜。

Answer 5

對於那些使用較新版本Chart.js的用戶，可以通過在options中設置tooltips.callbacks.label的回調來設置標簽。

這樣的例子是：

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