Mari kita bercakap tentang carta skala tidak sekata jquery-Soal Jawab bahagian hadapan-php.cn

Mari kita bercakap tentang carta skala tidak sekata jquery

PHPz

Lepaskan： 2023-04-06 10:12:50

asal

520 orang telah melayarinya

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang menyediakan banyak kaedah dan fungsi yang mudah dan pantas untuk mencapai kesan halaman web dinamik dan interaktiviti. Dari segi visualisasi data, jQuery juga mempunyai banyak pemalam dan alatan yang berkaitan, salah satunya ialah carta skala tidak sekata.

Carta skala tidak sekata bermakna pada paksi mendatar, jarak antara titik data tidak tetap, tetapi diedarkan mengikut nisbah atau peraturan tertentu. Carta jenis ini biasanya digunakan untuk memaparkan data siri masa atau titik data dengan atribut yang berbeza untuk mempersembahkan hubungan antara titik data dengan lebih jelas.

Apabila melaksanakan carta skala tidak sekata, jQuery menyediakan beberapa pemalam yang mudah dan mudah digunakan. Yang lebih biasa digunakan ialah D3.js dan Highcharts. Berikut akan memperkenalkan penggunaan kedua-dua pemalam ini.

Pertama ialah D3.js. D3.js ialah perpustakaan JavaScript dipacu data yang mencapai kesan visualisasi data dengan beroperasi pada dokumen DOM. Apabila menggunakan D3.js untuk melaksanakan carta berskala tidak sekata, kita boleh mencapai ini dengan menentukan skala dan paksi. Bar skala digunakan untuk memetakan data ke lokasi piksel pada paksi mendatar, manakala paksi digunakan untuk melukis tanda dan label pada paksi mendatar.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan D3.js untuk melaksanakan carta garisan dengan skala tidak sekata:

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

Salin selepas log masuk

Dalam contoh ini, kami mentakrifkan carta garisan yang mengandungi 10 Data menetapkan data titik data. Dengan mentakrifkan skala dan paksi, kami menyebarkan jarak antara titik data secara tidak sekata merentasi paksi mendatar. Semasa melukis carta garisan, kami menggunakan fungsi .line() yang disediakan oleh D3.js untuk memetakan set data ke laluan SVG. Akhir sekali, paksi mendatar dilukis dan skala dan label ditetapkan.

Pengenalan seterusnya ialah Highcharts. Highcharts ialah perpustakaan carta JavaScript berciri penuh yang menyediakan pelbagai jenis carta, interaktiviti dan kesan dinamik.

Ia juga sangat mudah untuk melaksanakan carta skala tidak sekata dalam Highcharts. Kami boleh mentakrifkan koordinat paksi mendatar yang sepadan dengan setiap titik data dengan menetapkan atribut kategori paksi-x, seperti yang ditunjukkan di bawah:

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

Salin selepas log masuk

Dalam contoh ini, kami juga menggunakan data set Data. Semasa melukis carta, kami menetapkan atribut kategori paksi-x dan menetapkan koordinat paksi mendatar yang sepadan dengan setiap titik data, dengan itu mencapai kesan skala tidak sekata.

Selain dua pemalam di atas, terdapat banyak perpustakaan dan pemalam jQuery lain yang boleh digunakan untuk melaksanakan carta skala tidak sekata. Tidak kira pendekatan yang anda ambil, pilihan anda perlu berdasarkan jenis data dan keperluan khusus anda. Berbanding dengan carta biasa, carta skala tidak sekata boleh mempersembahkan hubungan antara titik data dengan lebih intuitif, membantu pengguna memahami dan menganalisis data dengan lebih baik.

Atas ialah kandungan terperinci Mari kita bercakap tentang carta skala tidak sekata jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!