Exemple détaillé des paramètres wx-charts du plug-in de graphique d'applet WeChat-Développement de mini-programmes-php.cn

Exemple détaillé des paramètres wx-charts du plug-in de graphique d'applet WeChat

Y2J

Libérer： 2017-05-02 11:01:21

original

2679 Les gens l'ont consulté

Le plug-in de graphique du mini programme WeChat (wx-charts) est basé sur le dessin sur toile. Il est petit et prend en charge les types de graphiques tels que les diagrammes circulaires, les graphiques linéaires, les graphiques à barres, les graphiques en aires, etc. Actuellement, les graphiques wx. est le plug-in de graphique de mini-programme WeChat le plus populaire. Un plug-in de graphique d'applet WeChat puissant et utile, les paramètres et le didacticiel d'utilisation.

wx-charts

Types de graphiques pris en charge

camembert

ligne de graphique linéaire

colonne de graphique à colonnes

Zone du graphique en zones

Affichage haute définition

Réglez la taille du canevas à 2 fois la taille, puis réduisez-la à 50 %. Il est recommandé d'effectuer de tels réglages. Le graphique lui-même est. dessiné selon la configuration de l'affichage haute définition, sinon l'effet global sera trop important

/* 例如设计图尺寸为320 x 300 */
.canvas {
    width: 640px;
    height: 600px;
    transform: scale(0.5)
}

Copier après la connexion

Description du paramètre wx-charts

opts Object

opts.canvasId String requis applet WeChat canvas-id

opts.width Nombre de largeur de toile requise, l'unité est px

opts.height Nombre de hauteur de toile requise, l'unité est px

opts.type String type de graphique requis, la valeur facultative est un secteur, une ligne, une colonne, une zone

opts.categories Tableau requis (non requis pour le diagramme circulaire) Classification des catégories de données

opts.dataLabel Boolean par défaut true Indique s'il faut afficher valeur du contenu des données dans le graphique

opts.yAxis Objet Configuration de l'axe Y

opts.yAxis.format Fonction Affichage de texte personnalisé sur l'axe Y

opts.yAxis.min Nombre Valeur de départ de l'axe Y

opts .yAxis.title Chaîne Titre de l'axe Y

opts.series Tableau requis Liste de données

Liste des données pour chaque définition de structure

Objet dataItem

tableau dataItem.data requis (le diagramme circulaire est un nombre) data

dataItem.color String Par exemple #7cb5ec S'il n'est pas transmis, le jeu de couleurs par défaut du système sera utilisé

dataItem.name Nom des données de chaîne

dateItem .format Fonction Contenu des données d'affichage personnalisé

Exemple de plug-in de graphique wx-charts

graphique à secteurs

var Charts = require(&#39;charts.js&#39;);
new Charts({
    canvasId: &#39;pieCanvas&#39;,
    type: &#39;pie&#39;,
    series: [{
        name: &#39;成交量1&#39;,
        data: 15,
    }, {
        name: &#39;成交量2&#39;,
        data: 35,
    }, {
        name: &#39;成交量3&#39;,
        data: 78,
    }, {
        name: &#39;成交量4&#39;,
        data: 63,
    }],
    width: 640,
    height: 400,
    dataLabel: false
});

Copier après la connexion

Exemple détaillé des paramètres wx-charts du plug-in de graphique dapplet WeChat

graphique en courbes

new Charts({
    canvasId: &#39;lineCanvas&#39;,
    type: &#39;line&#39;,
    categories: [&#39;2012&#39;, &#39;2013&#39;, &#39;2014&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],
    series: [{
        name: &#39;成交量1&#39;,
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }, {
        name: &#39;成交量2&#39;,
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }],
    yAxis: {
        title: &#39;成交金额 (万元)&#39;,
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    width: 640,
    height: 400
});

Copier après la connexion

Exemple détaillé des paramètres wx-charts du plug-in de graphique dapplet WeChat

Graphique à barres en colonnes

new Charts({
    canvasId: &#39;columnCanvas&#39;,
    type: &#39;column&#39;,
    categories: [&#39;2016-08&#39;, &#39;2016-09&#39;, &#39;2016-10&#39;, &#39;2016-11&#39;, &#39;2016-12&#39;, &#39;2017&#39;],
    series: [{
        name: &#39;成交量1&#39;,
        data: [15, 20, 45, 37, 4, 80]
    }, {
        name: &#39;成交量2&#39;,
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: &#39;成交量3&#39;,
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: &#39;成交量4&#39;,
        data: [70, 40, 65, 100, 34, 18]
    }],
    yAxis: {
        format: function (val) {
            return val + &#39;万&#39;;
        }
    },
    width: 640,
    height: 400,
    dataLabel: false
});

Copier après la connexion

Exemple détaillé des paramètres wx-charts du plug-in de graphique dapplet WeChat

Carte en aires AreaChart

new Charts({
    canvasId: &#39;areaCanvas&#39;,
    type: &#39;area&#39;,
    categories: [&#39;2016-08&#39;, &#39;2016-09&#39;, &#39;2016-10&#39;, &#39;2016-11&#39;, &#39;2016-12&#39;, &#39;2017&#39;],
    series: [{
        name: &#39;成交量1&#39;,
        data: [70, 40, 65, 100, 34, 18],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }, {
        name: &#39;成交量2&#39;,
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
            return val.toFixed(2) + &#39;万&#39;;
        }
    }],
    yAxis: {
        format: function (val) {
            return val + &#39;万&#39;;
        }
    },
    width: 640,
    height: 400
});

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Exemple détaillé des paramètres wx-charts du plug-in de graphique d'applet WeChat