Comment ajouter l'étiquette dans le graphique.js pour un camembert

j'affiche un diagramme à secteurs. Mais comment afficher les étiquettes dans les diagrammes à secteurs.

ci-dessous est la carte.code JS pour diagramme circulaire. 

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

et ci-dessous est le code du fichier html pour l'affichage du diagramme à secteurs

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);
27
demandé sur Hakam Fostok 2014-03-20 09:37:30

5 réponses

EDIT: http://jsfiddle.net/nCFGL/223 / mon exemple.

vous devriez pouvoir aimer ce qui suit: 

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

incluez le tableau.js situé à:

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

15
répondu FiringSquadWitness 2016-10-27 12:20:18

il n'est pas nécessaire d'utiliser une autre bibliothèque comme newChart ou d'utiliser les demandes de pull d'autres personnes pour tirer cela. Tout ce que vous avez à faire est de définir un objet options et d'ajouter le label où et comment vous le voulez dans le tooltip. 

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

si vous voulez que le tooltip soit toujours affiché, vous pouvez faire d'autres modifications aux options: 

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

dans vos éléments de données, vous devez ajouter la propriété d'étiquette désirée et la valeur tout. 

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

maintenant, tout ce que vous avez à faire est de passer l'objet options après les données à la nouvelle tarte comme ceci: new Chart(ctx).Pie(data,optionsPie) et vous êtes fait.

cela fonctionne probablement mieux pour les tartes qui ne sont pas très petites en taille.

diagramme à secteurs avec des étiquettes

34
répondu Ivan Dimov 2015-12-07 14:51:42

la solution de Rachel fonctionne bien, bien que vous devez utiliser le script tiers de raw.githubusercontent.com

il y a maintenant une caractéristique qu'ils montrent sur la page d'accueil lors de l'annonce du script" modulaire". Vous pouvez y voir une légende avec cette 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>

pour ce faire, ils utilisent l'option de configuration de carte 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>"

vous pouvez trouver le doumentation ici sur chartjs.org Cela fonctionne pour toutes les cartes bien qu'il ne fasse pas partie du global chart configuration .

puis ils créent la légende et l'ajoutent au DOM comme ceci: 

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

échantillon Voir Aussi mon jsfiddle échantillon

9
répondu Smamatti 2014-07-15 11:09:32

Use ChartNew.js au lieu de Chart.js

...

donc, J'ai retravaillé le tableau.js. La plupart des changements, sont associés aux requêtes dans les numéros "Github" de Chart.js.

et voici un échantillon 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);

il fournit même un éditeur GUI http://charts.livegap.com/

si doux.

8
répondu Frank Fang 2015-01-08 06:36:38

pour ceux qui utilisent des versions plus récentes.js, vous pouvez définir une étiquette en définissant le rappel pour les tooltips.rappel.étiquette dans les options.

exemple: 

var chartOptions = {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return 'label';
            }
        }
    }
}
4
répondu arockburn 2016-10-05 00:48:36