Parlons du graphique à échelle inégale jquery-Questions et réponses frontales-php.cn

Parlons du graphique à échelle inégale jquery

PHPz

Libérer： 2023-04-06 10:12:50

original

546 Les gens l'ont consulté

jQuery est une bibliothèque JavaScript largement utilisée qui fournit de nombreuses méthodes et fonctions pratiques et rapides pour obtenir des effets de page Web dynamiques et une interactivité. En termes de visualisation de données, jQuery dispose également de nombreux plug-ins et outils associés, dont le graphique à échelle inégale.

Un graphique à échelle inégale signifie que sur l'axe horizontal, la distance entre les points de données n'est pas fixe, mais est distribuée selon un certain rapport ou règle. Ce type de graphique est généralement utilisé pour afficher des données de séries chronologiques ou des points de données avec différents attributs afin de présenter plus clairement la relation entre les points de données.

Lors de la mise en œuvre de graphiques à échelles inégales, jQuery fournit des plug-ins pratiques et faciles à utiliser. Les plus couramment utilisés sont D3.js et Highcharts. Ce qui suit présentera l’utilisation de ces deux plug-ins.

Le premier est D3.js. D3.js est une bibliothèque JavaScript basée sur les données qui permet d'obtenir des effets de visualisation de données en opérant sur des documents DOM. Lorsque nous utilisons D3.js pour implémenter des graphiques à échelle inégale, nous pouvons y parvenir en définissant l'échelle et l'axe. Les échelles sont utilisées pour mapper les données aux emplacements des pixels sur l'axe horizontal, tandis que les axes sont utilisés pour dessiner des graduations et des étiquettes sur l'axe horizontal.

Ce qui suit est un exemple simple montrant comment utiliser D3.js pour implémenter un graphique linéaire avec des échelles inégales :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3.js刻度不均匀图表</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <svg width="960" height="500"></svg>
  <script>
    // 数据
    var data = [
      {x: 1, y: 10},
      {x: 2, y: 20},
      {x: 4, y: 30},
      {x: 7, y: 40},
      {x: 10, y: 50},
      {x: 15, y: 60},
      {x: 23, y: 70},
      {x: 30, y: 80},
      {x: 40, y: 90},
      {x: 50, y: 100}
    ];
    
    // 定义比例尺和轴
    var xScale = d3.scaleLinear()
      .domain([1, 50])
      .range([0, 960]);
    
    var xAxis = d3.axisBottom(xScale)
      .ticks(10)
      .tickValues([1, 2, 4, 7, 10, 15, 23, 30, 40, 50]);
    
    // 绘制折线图
    var svg = d3.select("svg");
    
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 2)
      .attr("d", d3.line()
        .x(function(d) { return xScale(d.x); })
        .y(function(d) { return d.y; })
      );
    
    // 绘制坐标轴
    svg.append("g")
      .attr("transform", "translate(0, 400)")
      .call(xAxis);
  </script>
</body>
</html>

Copier après la connexion

Dans cet exemple, nous définissons un ensemble de données contenant 10 points de données. En définissant l'échelle et l'axe, nous répartissons l'espacement entre les points de données de manière inégale sur l'axe horizontal. Lors du dessin du graphique linéaire, nous avons utilisé la fonction .line() fournie par D3.js pour mapper l'ensemble de données sur le chemin SVG. Enfin, l'axe horizontal est dessiné et les échelles et les étiquettes sont définies.

La prochaine introduction est Highcharts. Highcharts est une bibliothèque de graphiques JavaScript complète qui fournit plusieurs types de graphiques, d'interactivité et d'effets dynamiques.

Il est également très simple d'implémenter des graphiques à échelles inégales dans Highcharts. Nous pouvons définir les coordonnées de l'axe horizontal correspondant à chaque point de données en définissant l'attribut catégories de l'axe des x, comme indiqué ci-dessous :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highcharts刻度不均匀图表</title>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    // 数据
    var data = [
      {name: '1', y: 10},
      {name: '2', y: 20},
      {name: '4', y: 30},
      {name: '7', y: 40},
      {name: '10', y: 50},
      {name: '15', y: 60},
      {name: '23', y: 70},
      {name: '30', y: 80},
      {name: '40', y: 90},
      {name: '50', y: 100}
    ];
    
    // 绘制图表
    Highcharts.chart('container', {
      chart: {
        type: 'line'
      },
      title: {
        text: 'Highcharts刻度不均匀图表'
      },
      xAxis: {
        categories: ['1', '2', '4', '7', '10', '15', '23', '30', '40', '50']
      },
      yAxis: {
        title: {
          text: 'Y轴标题'
        }
      },
      series: [{
        name: '数据点',
        data: data
      }]
    });
  </script>
  </body>
</html>

Copier après la connexion

Dans cet exemple, nous utilisons également un ensemble de données contenant 10 points de données. Lors du dessin du graphique, nous avons spécifié l'attribut catégories de l'axe des x et défini la coordonnée de l'axe horizontal correspondant à chaque point de données, obtenant ainsi l'effet d'une échelle inégale.

En plus des deux plug-ins ci-dessus, il existe de nombreuses autres bibliothèques et plug-ins jQuery qui peuvent être utilisés pour implémenter des graphiques à échelle inégale. Quelle que soit l’approche que vous adoptez, le choix devra être basé sur votre type de données et vos besoins spécifiques. Par rapport aux graphiques ordinaires, les graphiques à échelle inégale peuvent présenter la relation entre les points de données de manière plus intuitive, aidant ainsi les utilisateurs à mieux comprendre et analyser les données.

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!