Jquery 불균등 스케일 차트에 대해 이야기합시다-프런트엔드 Q&A-php.cn

Jquery 불균등 스케일 차트에 대해 이야기합시다

PHPz

풀어 주다： 2023-04-06 10:12:50

원래의

552명이 탐색했습니다.

jQuery는 동적 웹 페이지 효과와 상호 작용을 달성하기 위한 편리하고 빠른 방법과 기능을 많이 제공하는 널리 사용되는 JavaScript 라이브러리입니다. 데이터 시각화 측면에서 jQuery에는 관련 플러그인과 도구도 많이 있으며, 그 중 하나가 고르지 못한 척도 차트입니다.

균등 척도 차트는 가로축에서 데이터 포인트 사이의 거리가 고정되어 있지 않고 특정 비율이나 규칙에 따라 분포되어 있음을 의미합니다. 이러한 종류의 차트는 일반적으로 시계열 데이터 또는 다양한 속성을 가진 데이터 포인트를 표시하여 데이터 포인트 간의 관계를 보다 명확하게 표시하는 데 사용됩니다.

균등하지 않은 규모의 차트를 구현할 때 jQuery는 편리하고 사용하기 쉬운 몇 가지 플러그인을 제공합니다. 더 일반적으로 사용되는 것은 D3.js와 Highcharts입니다. 다음은 이 두 플러그인의 사용법을 소개합니다.

첫 번째는 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는 다양한 유형의 차트, 상호 작용 및 동적 효과를 제공하는 모든 기능을 갖춘 JavaScript 차트 라이브러리입니다.

Highcharts에서 균등하지 않은 규모의 차트를 구현하는 것도 매우 간단합니다. 아래와 같이 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축의 카테고리 속성을 지정하고 각 데이터 포인트에 해당하는 가로축 좌표를 설정하여 균등하지 않은 스케일 효과를 얻었습니다.

위의 두 가지 플러그인 외에도 균등하지 않은 척도 차트를 구현하는 데 사용할 수 있는 다른 jQuery 라이브러리 및 플러그인이 많이 있습니다. 어떤 접근 방식을 취하든 특정 데이터 유형과 요구 사항에 따라 선택해야 합니다. 일반 차트에 비해 불균등 축척 차트는 데이터 포인트 간의 관계를 보다 직관적으로 표현할 수 있어 사용자가 데이터를 더 잘 이해하고 분석하는 데 도움이 됩니다.

위 내용은 Jquery 불균등 스케일 차트에 대해 이야기합시다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!