Explication détaillée des étapes d'utilisation de la bibliothèque de graphiques légère Chart.js

Cette fois, je vous apporte une explication détaillée des étapes pour utiliser la bibliothèque de graphiques légers Chart.js. Quelles sont les précautions lors de l'utilisation de la bibliothèque de graphiques légers Chart.js. Voici des cas pratiques. jetez un oeil une fois.

Avant-propos

Dans un projet récent, j'ai rencontré le besoin de dessiner un graphique sur la page. Cela nécessite un graphique en éventail et un histogramme. Bien que cela soit possible, dessiner à l'aide de SVG ou de Canvas n'est pas nécessairement facile, nous avons donc recherché et connecté des bibliothèques de graphiques tierces grand public pour une utilisation dans le cadre de projets. Ce qui suit enregistre principalement certaines de mes expériences et solutions lors de l'utilisation. Veuillez vous référer à la documentation officielle pour des didacticiels spécifiques.

Sélection technique

Etude sur les Highcharts, les ECharts de Baidu, la bibliothèque de graphiques G2 et Charts.js d'Alibaba, depuis le Le projet a peu de demande pour les graphiques et les graphiques ne sont pas complexes, le léger Charts.js est introduit. Chart.js est facile à démarrer. Il vous suffit de référencer le fichier de script dans la page et de créer un nœud Il fournit 8 méthodes de présentation visuelle de vos données, chacune avec des effets dynamiques et personnalisables ; une efficacité de dessin efficace sur tous les navigateurs modernes (IE9+) Mise en page réactive ;

Introduire

Téléchargez le code source sur GitHUb et introduisez le fichier dist/Chart.bundle.js dans le projet à utiliser ; le code source, j'ai trouvé qu'il est compatible avec plusieurs méthodes de chargement de modules, j'ai donc utilisé requireJs pour le charger sur la page.

Expérience d'utilisation

①Le nombre de valeurs de couleur du graphique n'a pas besoin d'être égal au nombre de données, telles que

var pieConfig = {
   type: 'pie',
   data: {
     datasets: [{
      data: [10, 20],
      backgroundColor: ['#debd5a', '#ff6d4a', '#3cc9bf', '#7599e9',]
     }]
  }
}

② Vous pouvez annuler les options réactives : {responsive : false}, ce qui facilite le contrôle de la taille du graphique. Le graphique sera aussi grand que le canevas et le canevas ne se remplira pas automatiquement. vers le haut du conteneur extérieur.

③Annulez l'événement click de la légende, car cliquer sur la légende masquera la proportion des données par défaut, je dois donc supprimer l'événement click, définir la légende : {onClick: function () {}}, et modifiez l'événement click.

④ Changez la légende du rectangle par défaut en carré et définissez la taille de la police et la valeur de couleur de la légende

options: {
  legend: {
   position: 'right',
   labels: {
    boxWidth: 14,// 修改宽度
    fontSize: 14,
    fontColor: '#666666'
   }
}

L'effet est le suivant

⑤ Supprimez les lignes de la grille de l'histogramme, définissez la couleur de l'axe, la largeur du rectangle et les données de l'axe Y pour commencer à afficher à partir de 0. Depuis que Chart.js 2.0 est utilisé, les paramètres de configuration ont beaucoup changé, donc de nombreux exemples sur Internet sont devenus invalides. Voici le code de configuration efficace

options: {
  scales: {
   xAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏x轴方向轴线
     zeroLineColor: '#666666'// 设置轴颜色
    },
    barPercentage: 0.2,// 设置柱宽度
    ticks: {// 设置轴文字字号和色值
     fontSize: 12,
     fontColor: '#666666'
    }
   }],
   yAxes: [{
    gridLines: {
     color: 'rgba(0, 0, 0, 0)',// 隐藏要y轴轴线
     zeroLineColor: '#666666'
     },
     ticks: {
      fontSize: 12,
      beginAtZero: true,// y轴数据从0开始展示
      fontColor: '#666666'
      }
   }]
  }
}

L'effet est le suivant

<.>

⑥Pour ajouter des unités aux données dans les info-bulles du graphique, vous pouvez utiliser la fonction de rappel des info-bulles pour définir l'effet

tooltips: {
 callbacks: {
  label: function (tooltipItem, data) {
   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '%';
   var title = data.labels[tooltipItem.index] + ':';
   return title + value;
   }
  }
}

comme suit

tooltips: {
  callbacks: {
   label: function (tooptipItem) {
    return tooptipItem.yLabel + '个' ;
   }
  }
}

effet Comme suit

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser PHP pour implémenter la reconnaissance faciale et la connexion faciale pour les mini-programmes WeChat

Vue Implémentation .js Explication détaillée des étapes d'ajout et de suppression de tables

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!