Comment ajouter une étiquette dans chart.js pour le graphique à secteurs

Je suis de l'affichage graphique. Mais comment faire pour Afficher les étiquettes dans les diagrammes à secteurs.

Ci-dessous est la chart.js code pour un camembert.

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 le code du fichier html pour l'affichage graphique à 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);

InformationsquelleAutor user3440583 | 2014-03-20

charts javascript

15

EDIT: http://jsfiddle.net/nCFGL/223/ Mon Exemple.

Vous devriez être en mesure de comme suit:
```
var pieData = [{
    value: 30,
    color: "#F38630",
    label: 'Sleep',
    labelColor: 'white',
    labelFontSize: '16'
  },
  ...
];
```
Inclure la Chart.js situé à:

https://github.com/nnnick/Chart.js/pull/35
- Je l'ai essayé..mais sa ne fonctionne pas. proposer une autre alternative.
- J'ai essayé de résoudre ça, mais le mieux que j'ai pu trouver serait à l'aide d'un Beignet. jsfiddle.net/mayankcpdixit/6xV78
- est-il une solution pour le camembert?
- jsfiddle.net/nCFGL/222
- Vous aurez besoin d'inclure raw.githubusercontent.com/Regaddi/Chart.js/...
- Désolé, pas de lien, jsfiddle.net/nCFGL/222
- Grâce à son travail. Vous s'il vous plaît me dire comment afficher le pourcentage avec des étiquettes de camembert?
- Lors de la création de l'objet pieData à la fois créer de la valeur et de l'étiquette sous la même: jsfiddle.net/nCFGL/227
- J'ai essayé de faire de ce beignet et camembert de travail, mais il n'a pas montrer quoi que ce soit, drôle, car il a montré de la Ligne, de Radars et de tous les autres tableaux, sauf pour celui-ci. Je suis l'aide de réagir avec Ecma Script 6, je suis alors venu à cette question et de coller les données et cela a fonctionné! Le plus drôle, c'est que la page chartjs.org/docs/#doughnut-pie-chart-example-usage Montre une autre structure de données avec "jeux de données", est-il vraiment mal dans leur page? En tout cas, merci beaucoup, a sauvé ma journée !
- Cela ne fonctionne pas avec Chart.js 2.2.1.
InformationsquelleAutor FiringSquadWitness
39

Il n'est pas nécessaire d'utiliser une autre bibliothèque comme newChart ou utiliser d'autres personnes de tirer des demandes de tirer ce off. Tout ce que vous avez à faire est de définir un objet d'options et d'ajouter l'étiquette où et quand vous le voulez dans l'info-bulle.
```
var optionsPie = {
    tooltipTemplate: "<%= label %> - <%= value %>"
}
```
Si vous voulez de l'info-bulle affiche toujours, vous pouvez apporter 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 le libellé souhaité de la propriété et de la valeur et c'est tout.
```
data = [
    {
        value: 480000,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Tobacco"
    }
];
```
Maintenant, tout ce que vous avez à faire est de passer l'objet d'options d'après les données de la nouvelle Tarte comme ceci: new Chart(ctx).Pie(data,optionsPie) et vous avez terminé.

C'est probablement ce qui fonctionne le mieux pour les tartes qui ne sont pas de très petite taille.

Graphique à secteurs avec des étiquettes
- Excellente solution!!! Merci!
- La meilleure solution ici. Savez-vous si et comment je peux déplacer les étiquettes autour?
- Grand. @Ivan pouvez s'il vous plaît prendre un coup d'oeil à mon thread: stackoverflow.com/questions/43274913/...
InformationsquelleAutor Ivan Dimov
9

Rachel solution fonctionne très bien, même si vous avez besoin de faire usage de la troisième partie du script de raw.githubusercontent.com

Maintenant il y a une fonctionnalité qu'ils montrent sur la page d'atterrissage quand se faire de la pub de la "modulaire" de script. Vous pouvez voir une légende là-bas 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 parvenir à cette fin, ils utilisent le graphique option de configuration 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 la doumentation ici sur chartjs.org
Cela fonctionne pour tous les graphiques bien qu'il ne fait pas partie de la le graphique mondial de configuration.

Puis ils créent la légende et l'ajouter au DOM comme ceci:
```
var legend = myPie.generateLegend();
$("#legend").html(legend);
```
Échantillon
Voir aussi mon JSFiddle échantillon
- Est-il un moyen que vous pouvez re-créer cette légende en dire un éco modèle et tout simplement un lien à ce modèle?
- Je ne sais pas ce qu'est un éco modèle est. Bien sûr, vous pouvez appeler la generateLegend() fonction de nouveau un de le remplacer dans les DOM. Je ne pense pas qu'il y est un moyen de lier un modèle, mais vous pouvez l'importer avec un script à partir de votre fichier de source de définir une variable comme legendTemplate: <your imported string>
- J'avais besoin d'un peu de modifications pour le faire fonctionner: "données" au lieu de "segment", "couleur" au lieu de "fillColor", class="legend" (bien sûr j'ai changé le nom de la classe dans des styles aussi.
InformationsquelleAutor Smamatti

Utilisation ChartNew.js au lieu de Chart.js

...

Donc, j'ai re-travaillé Chart.js. La plupart de ces changements sont associés à des demandes de "GitHub" questions de Chart.js.

Et voici un exemple de 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 de GUI http://charts.livegap.com/

Si doux.

aweesome merci beaucoup passer sur cette une raison ChartJs est abandonné =)
chart.js n'est pas abandonné. peut-être que c'était à une époque. il est incroyablement sain maintenant.

InformationsquelleAutor Frank Fang

Pour ceux qui utilisent des versions plus récentes Chart.js vous pouvez définir un label par le réglage de la fonction de rappel pour les info-bulles.les rappels.étiquette dans les options.

Exemple de ceci serait:

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

InformationsquelleAutor arockburn

Vous devez vous connecter pour publier un commentaire.