상자 및 수염 도표를 사용하여 ECharts에서 데이터 분포를 표시하는 방법-JS 튜토리얼-php.cn

상자 및 수염 도표를 사용하여 ECharts에서 데이터 분포를 표시하는 방법

王林

풀어 주다： 2023-12-17 08:54:31

원래의

1499명이 탐색했습니다.

상자 및 수염 도표를 사용하여 ECharts에서 데이터 분포를 표시하는 방법

소개:
데이터 분석 및 시각화는 현대 데이터 과학에서 매우 중요한 측면입니다. 데이터 분석 과정에서 데이터의 특성과 추세를 더 잘 이해하기 위해 데이터 분포를 시각화해야 하는 경우가 많습니다. Boxplot은 데이터의 통계적 특성, 이상치 등 중요한 정보를 명확하게 표시할 수 있는 시각화 방법으로 일반적으로 사용됩니다. 이 기사에서는 상자 및 수염 도표를 사용하여 ECharts에서 데이터 분포를 표시하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. ECharts 소개:
ECharts는 Baidu에서 개발하고 JavaScript로 작성된 오픈 소스 데이터 시각화 라이브러리입니다. ECharts는 다양한 데이터 시각화 요구 사항을 쉽게 실현할 수 있는 다양한 차트 유형과 대화형 기능을 제공합니다. 이 기사에서는 EChart를 사용하여 상자 및 수염 플롯을 그릴 것입니다.

2. 데이터 준비:
데이터 분포를 표시하기 전에 데이터 세트를 준비해야 합니다. 다음은 총 100개의 샘플 포인트가 있는 샘플 데이터입니다.

var data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 
            150, 160, 170, 180, 190, 200, 250, 260, 270, 280, 
            300, 320, 340, 360, 380, 400, 450, 460, 470, 480, 
            500, 520, 540, 560, 580, 600, 650, 660, 670, 680, 
            700, 720, 740, 760, 780, 800, 850, 860, 870, 880, 
            900, 920, 940, 960, 980, 1000, 1050, 1060, 1070, 1080, 
            1100, 1120, 1140, 1160, 1180, 1200, 1250, 1260, 1270, 1280, 
            1300, 1320, 1340, 1360, 1380, 1400, 1450, 1460, 1470, 1480, 
            1500, 1520, 1540, 1560, 1580, 1600, 1650, 1660, 1670, 1680, 
            1700, 1720, 1740, 1760, 1780, 1800, 1850, 1860, 1870, 1880];

로그인 후 복사

3. 상자 및 수염 도표 그리기:
상자 및 수염 도표를 그리려면 ECharts의 상자 도표 시리즈를 사용해야 합니다. 다음은 ECharts 구성 항목에 대한 샘플 코드입니다.

var option = {
    dataset: [{
        dimensions: ['value'],
        source: data
    }],
    grid: {
        left: '10%',
        right: '10%',
        top: '15%',
        bottom: '10%'
    },
    xAxis: [{
        type: 'category',
        boundaryGap: true,
        data: ['']
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        max: 2000,
        axisLabel: {
            formatter: '{value}'
        }
    }],
    series: [{
        type: 'boxplot',
        tooltip: {
            formatter: function (params) {
                return [
                    '最大值：' + params.data[5],
                    '上四分位数：' + params.data[4],
                    '中位数：' + params.data[3],
                    '下四分位数：' + params.data[2],
                    '最小值：' + params.data[1]
                ].join('<br/>');
            }
        }
    }]
};

var myChart = echarts.init(document.getElementById('boxplot'));
myChart.setOption(option);

로그인 후 복사

위 코드의 data 배열은 앞서 준비한 샘플 데이터입니다. 소스를 데이터로 채워서 데이터를 차트에 전달하여 플롯할 수 있습니다. 구성 항목의 data数组是我们之前准备好的样本数据。通过将数据填充到source中，我们可以将数据传递给图表进行绘制。

配置项中的xAxis和yAxis分别用于设置X轴和Y轴的样式和范围。可以根据实际需求进行调整。

series中的type设为'boxplot'，表示我们要绘制的是箱型图。tooltip函数用于设置鼠标悬停时的提示信息。

最后，我们使用echarts.init

xAxis 및 yAxis는 각각 X축과 Y축의 스타일과 범위를 설정하는 데 사용됩니다. 실제 필요에 따라 조정될 수 있습니다.

series의 type을 'boxplot'으로 설정합니다. 이는 상자 그림을 그리겠다는 의미입니다. 툴팁 기능은 마우스 오버 시 프롬프트 정보를 설정하는 데 사용됩니다.

마지막으로 echarts.init를 사용하여 차트를 초기화하고 차트를 HTML 페이지의 지정된 컨테이너에 연결합니다.

4. 효과 표시:

위 구성 항목과 코드를 통해 ECharts에 상자 및 수염 차트를 그릴 수 있습니다. 차트를 HTML 웹페이지에 삽입하면 우리가 준비한 데이터 분포를 확인할 수 있습니다.

이 기사에서는 상자 수염 도표를 사용하여 ECharts에서 데이터 분포를 표시하는 방법을 소개합니다. ECharts의 박스플롯을 통해 데이터의 통계적 특성을 직관적으로 이해할 수 있어 데이터 분석 및 의사결정을 보다 효과적으로 수행할 수 있습니다. 이 기사가 데이터 시각화를 위해 상자 수염 플롯을 사용하는 데 도움이 되었기를 바랍니다.

참조: 🎜🎜🎜ECharts 공식 문서: https://echarts.apache.org/zh/index.html🎜🎜

위 내용은 상자 및 수염 도표를 사용하여 ECharts에서 데이터 분포를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!