Explication détaillée du code de la bibliothèque de graphiques JavaScript basée sur xCharts-D3 (image)-js tutoriel-php.cn

Explication détaillée du code de la bibliothèque de graphiques JavaScript basée sur xCharts-D3 (image)

黄舟

Libérer： 2017-03-16 14:42:16

original

2045 Les gens l'ont consulté

JavaScript basé sur xCharts-D3 Détails du code de la bibliothèque de graphiques (image)

xCharts est une bibliothèque de graphiques JavaScript basée sur D3. xCharts est très puissant. Il prend non seulement en charge plusieurs types de graphiques, mais possède également des styles de thèmes de graphiques riches et est très beau. De plus, la conception de xCharts est très flexible, la configuration est relativement simple et la vitesse de chargement n'est pas mauvaise. Il s'agit d'une application de graphiques JavaScript très ouverte et personnalisable.

Caractéristiques de xCharts

est basé sur JavaScript, il peut donc être utilisé tant que vous disposez d'un navigateur et que la compatibilité de la plateforme est bonne.
Ouvert et personnalisable, la configuration est donc assez flexible.
prend en charge le format SVG, de sorte que les données graphiques peuvent également être facilement exportées.

Utilisation de xCharts

Graphique à colonnes simple

Code JavaScript :

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart(&#39;bar&#39;, data, &#39;#example1&#39;);

Copier après la connexion

Rendu :

Graphique linéaire

Code JavaScript :

var data = {
  "xScale": "time",
  "yScale": "linear",
  "type": "line",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "2012-11-05",
          "y": 1
        },
        {
          "x": "2012-11-06",
          "y": 6
        },
        {
          "x": "2012-11-07",
          "y": 13
        },
        {
          "x": "2012-11-08",
          "y": -3
        },
        {
          "x": "2012-11-09",
          "y": -4
        },
        {
          "x": "2012-11-10",
          "y": 9
        },
        {
          "x": "2012-11-11",
          "y": 6
        }
      ]
    }
  ]
};
var opts = {
  "dataFormatX": function (x) { return d3.time.format(&#39;%Y-%m-%d&#39;).parse(x); },
  "tickFormatX": function (x) { return d3.time.format(&#39;%A&#39;)(x); }
};
var myChart = new xChart(&#39;line&#39;, data, &#39;#example3&#39;, opts);

Copier après la connexion

Rendu :

AnimationGraphique à barres

Code JavaScript :

var errorBar = {
  enter: function (self, storage, className, data, callbacks) {
    var insertionPoint = xChart.visutils.getInsertionPoint(9),
      container,
      // Map each error bar into 3 points, so it&#39;s easier to draw as a single path
      // Converts each point to a triplet with y from (y - e) to (y + e)
      // It would be better to use the `preUpdateScale` method here,
      // but for this quick example, we&#39;re taking a shortcut  
      eData = data.map(function (d) {
        d.data = d.data.map(function (d) {
          return [{x: d.x, y: d.y - d.e}, {x: d.x, y: d.y}, {x: d.x, y: d.y + d.e}];
        });
        return d;
      }),
      paths;

    // It&#39;s always a good idea to create containers for sets
    container = self._g.selectAll(&#39;.errorLine&#39; + className)

Copier après la connexion

xChart.setVis(&#39;error&#39;, errorBar);

Copier après la connexion

var data = {
    "xScale": "ordinal",
    "yScale": "linear",
    "main": [
      {
        "className": ".errorExample",
        "data": [
          {
            "x": "Ponies",
            "y": 12
          },
          {
            "x": "Unicorns",
            "y": 23
          },
          {
            "x": "Trolls",
            "y": 1
          }
        ]
      }
    ],
    "comp": [
      {
        "type": "error",
        "className": ".comp.errorBar",
        "data": [
          {
            "x": "Ponies",
            "y": 12,
            "e": 5
          },
          {
            "x": "Unicorns",
            "y": 23,
            "e": 2
          },
          {
            "x": "Trolls",
            "y": 1,
            "e": 1
          }
        ]
      }
    ]
  };

Copier après la connexion

Rendu :

Résumé

xCharts est assez puissant Si vous avez besoin d'utiliser des graphiques dans votre application Web, alors xCharts vous convient parfaitement, vous pouvez l'essayer. .

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!