jqueryの不均等スケールチャートについて話しましょう-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryの不均等スケールチャートについて話しましょう

PHPz

Apr 06, 2023 am 08:54 AM

jQuery は広く使用されている JavaScript ライブラリであり、動的な Web ページの効果と対話性を実現するための便利で高速なメソッドと関数を多数提供します。データ視覚化の観点からは、jQuery には関連するプラグインやツールも多数あり、その 1 つが不均一スケールチャートです。

不均等なスケールグラフは、横軸上のデータポイント間の距離が固定されておらず、特定の比率または規則に従って分布していることを意味します。この種類のグラフは通常、時系列データまたはさまざまな属性を持つデータポイントを表示して、データポイント間の関係をより明確に示すために使用されます。

不均一な縮尺グラフを実装する場合、jQuery には便利で使いやすいプラグインがいくつか用意されています。より一般的に使用されるのは、D3.js と Highcharts です。以下では、これら 2 つのプラグインの使用方法を紹介します。

まずは D3.js です。 D3.js は、DOM ドキュメントを操作することでデータの視覚化効果を実現するデータ駆動型 JavaScript ライブラリです。 D3.js を使用して不均一なスケールのグラフを実装する場合、スケールと軸を定義することでこれを実現できます。スケールはデータを水平軸上のピクセル位置にマッピングするために使用され、軸は水平軸上に目盛りとラベルを描画するために使用されます。

次は、D3.js を使用して不均一なスケールの折れ線グラフを実装する方法を示す簡単な例です:

<!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>

ログイン後にコピー

この例では、10 個のデータポイントを含む折れ線グラフを定義します。データセットデータ。スケールと軸を定義することにより、データポイント間の間隔が水平軸全体にわたって不均一に広がります。折れ線グラフを描画するときは、D3.js が提供する .line() 関数を使用して、データセットを SVG パスにマッピングしました。最後に、横軸を描画し、スケールとラベルを設定します。

次の紹介はHighchartsです。 Highcharts は、複数のタイプのグラフ、対話性、動的な効果を提供する、フル機能の JavaScript グラフ作成ライブラリです。

ハイチャートで不均一なスケールチャートを実装することも非常に簡単です。以下に示すように、X 軸のカテゴリ属性を設定することで、各データポイントに対応する水平軸座標を定義できます。

<!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>

ログイン後にコピー

この例では、10 個のデータポイントデータを含むデータセットも使用します。チャートを描画するときに、x 軸のカテゴリ属性を指定し、各データポイントに対応する横軸の座標を設定することで、不均一なスケールの効果を実現しました。

上記の 2 つのプラグインに加えて、不等尺度グラフの実装に使用できる他にも多くの jQuery ライブラリとプラグインがあります。どのアプローチを取るかに関係なく、特定のデータの種類とニーズに基づいて選択する必要があります。通常のグラフと比較して、不等尺度グラフはデータポイント間の関係をより直観的に表現できるため、ユーザーがデータをよりよく理解して分析できるようになります。

以上がjqueryの不均等スケールチャートについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。