So verwenden Sie Box- und Whisker-Plots, um die Datenverteilung in ECharts anzuzeigen

So verwenden Sie Box- und Whisker-Plots zur Darstellung der Datenverteilung in ECharts

Einführung:
Datenanalyse und -visualisierung sind sehr wichtige Aspekte in der modernen Datenwissenschaft. Während des Datenanalyseprozesses müssen wir häufig die Verteilung von Daten visualisieren, um die Eigenschaften und Trends der Daten besser zu verstehen. Boxplot ist eine häufig verwendete Visualisierungsmethode, mit der wichtige Informationen wie statistische Merkmale und Ausreißer von Daten klar dargestellt werden können. In diesem Artikel wird erläutert, wie Sie Box- und Whisker-Plots verwenden, um die Datenverteilung in ECharts anzuzeigen, und es werden konkrete Codebeispiele gegeben.

1. Einführung in ECharts:
ECharts ist eine von Baidu entwickelte und in JavaScript geschriebene Open-Source-Datenvisualisierungsbibliothek. ECharts bietet eine Fülle von Diagrammtypen und interaktiven Funktionen, mit denen sich verschiedene Anforderungen an die Datenvisualisierung problemlos realisieren lassen. In diesem Artikel verwenden wir ECharts zum Zeichnen von Box- und Whisker-Plots.

2. Datenvorbereitung:
Bevor wir die Datenverteilung anzeigen, müssen wir einen Datensatz vorbereiten. Das Folgende sind Beispieldaten mit insgesamt 100 Beispielpunkten:

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. Zeichnen Sie Box- und Whisker-Plots:
Um Box- und Whisker-Plots zu zeichnen, müssen wir die Boxplot-Reihe von ECharts verwenden. Das Folgende ist ein Beispielcode für ECharts-Konfigurationselemente:

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);

Das Array data im obigen Code sind die Beispieldaten, die wir zuvor vorbereitet haben. Indem wir die Quelle mit Daten füllen, können wir die Daten zur Darstellung an das Diagramm übergeben. data数组是我们之前准备好的样本数据。通过将数据填充到source中，我们可以将数据传递给图表进行绘制。

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

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

最后，我们使用echarts.init

xAxis und yAxis in den Konfigurationselementen werden verwendet, um den Stil und den Bereich der X-Achse bzw. Y-Achse festzulegen. Es kann je nach tatsächlichem Bedarf angepasst werden.

Setzen Sie den type in series auf „Boxplot“, was bedeutet, dass wir einen Boxplot zeichnen möchten. Die Funktion tooltip wird verwendet, um die Eingabeaufforderungsinformationen festzulegen, wenn sich die Maus darüber befindet.

Abschließend verwenden wir echarts.init, um das Diagramm zu initialisieren und das Diagramm dem angegebenen Container der HTML-Seite zuzuordnen.

4. Effektanzeige:

Durch die oben genannten Konfigurationselemente und Codes können wir ein Box- und Whisker-Diagramm in ECharts zeichnen. Durch das Einbetten des Diagramms in eine HTML-Webseite kann die von uns vorbereitete Datenverteilung angezeigt werden.

Fazit:
• In diesem Artikel wird erläutert, wie Sie Box- und Whisker-Plots verwenden, um die Datenverteilung in ECharts anzuzeigen. Durch den Boxplot von ECharts können wir die statistischen Eigenschaften der Daten intuitiv verstehen, um so eine bessere Datenanalyse und Entscheidungsfindung durchzuführen. Ich hoffe, dieser Artikel hat Ihnen bei der Verwendung von Box- und Whisker-Plots zur Datenvisualisierung geholfen.

Referenz: 🎜🎜🎜Offizielles Dokument von ECharts: https://echarts.apache.org/zh/index.html🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Box- und Whisker-Plots, um die Datenverteilung in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!