丁香五月六月婷婷,日韩精品电影在线观看,日韩国产欧美制服中文

開源圖表庫Highcharts教程：如何創建交互式小提琴圖

原創|使用教程|編輯：楊鵬連|2020-08-11 10:09:31.057|閱讀 700 次

概述：在本文中，我們將向您展示如何使用Highcharts創建交互式小提琴圖。

Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

點擊下載Highcharts最新試用版

??1è?2??????

在本文中，我們將向您展示如何使用Highcharts創建交互式小提琴圖。
我們首先描述小提琴圖。然后，我們將引導您完成代碼。
下面演示2012年奧運會男和女運動員的體重以下學科：跆拳道，賽艇，鐵人三項，擊劍。小提琴圖可以直觀直觀地可視化每個學科的分布形狀和概率密度（運動員的體重）：

從上面的圖表中，借助小提琴類型圖，我們可以輕松地在同一學科的男性和女性中找到相似的模式。與其他學科相比，男女鐵人三項運動員的密度，體重形狀均表現出較小的變異性。男女跆拳道運動員分布廣泛，有多個集群。

已經知道了圖片，小提琴圖是顯示和比較數據集密度分布的最佳圖表。

現在，該探討代碼部分了。
該代碼分為兩個主要部分：

處理小提琴數據。
創建圖表。

處理小提琴數據

該功能（請查看GitHub鏈接）是小提琴情節的核心。該函數圍繞內核密度估計（KDE）構建。基本上，小提琴圖是KDE，其負片彼此相對顯示。該函數獲取數據集（在我們的情況下為運動員的體重）以及一些其他參數，然后生成密度形狀和描述性統計量度：這是函數參數的描述：

function processViolin(step, precision, densityWidth, ...args) { processViolin(step, precision, densityWidth, ...args) {
  ……
  return {return {
    xiData,,
    results,,
    stat
  };};
}}

step是最小數據集單位。該步驟用于對數據集進行采樣并創建KDE。

精度用于細化末端和細點處的小提琴圖，此參數越小，表示您在末端和圖表上的細點處獲得的點越多。
densityWidth用于加寬小提琴。此參數應等于1以反映KDE值的結果。但是，出于可見性目的，您可以自由更改，densityWidth以獲取更寬的可見形狀。
args是一個或多個表示數據集的數組。在我們的案例中，args是四組重量級運動員，每個學科一組。

因此，您可能想知道，它在實踐中如何工作？好吧，這是它的樣子：

let step = 1,
   precision = 0.00000000001,
   width = 3;
 let data = processViolin(step, precision, width, rowing, taekwondo, triathlon, fencing);

讓數據= processViolin（步長，精度，寬度，劃船，跆拳道，鐵人三項，擊劍）；
請注意所返回的數據processViolin()。data是一組三個數組：

xiData是使用運動員體重數據的步長和范圍生成的xAxis數據。
results包括所有小提琴圖數據。
stat是具有所有描述性統計系數的數組。

一旦有了該processViolin()功能，就可以為每個系列生成小提琴數據，下一步就是渲染數據。

創建圖表

圖表創建非常簡單。系列的類型是areasplinerange; 這種圖表類型允許我們使用一個范圍來獲得小提琴的形狀。該范圍是正和負KDE值的計算結果。該選項inverted: true有助于使小提琴圖垂直而不是水平：

chart: {
   type: "areasplinerange",
   inverted: true,
   animation: true
 }

為確保僅顯示所需數量的類別，請確保使用以下代碼限制該數量，其中最小和最大選項具有確切數量的類別范圍，在我們的示例中為四個：“滾動”，“ “跆拳道”，“鐵人三項”和“擊劍”。

yAxis: {
   ..
   min: 0,
   max: data.results.length - 1,
   ...
 },

獲得正確的小提琴形狀的最后一招是擺脫標記。否則，您將在每個系列的外部行周圍都帶有符號：

plotOptions: {
     series: {
       marker: {
         enabled: false
       },
       ...
     },

到目前為止，小提琴排行榜看起來很棒。不過，為了更加清晰起見，我們可以添加一些描述性統計系數，例如中位數（紅點），最大值（藍點），最小值（藍點），第一個四分位數（黑點）和第三個四分位數（黑點）：

好消息是，實現上述圖表所需的所有數據已在stat數組中提供。我們要做的就是構造信息，然后使用折線圖呈現它：

stat.forEach((e, i) => {
      statData.push([]);
      statData[i].push(
        { x: stat[i][0], y: i, name: "Min", marker: { fillColor: mColor } },
        {
          y: i,
          x: stat[i][1],
          name: "Q1",
          marker: { fillColor: qColor, radius: 4 }
        },
        {
          y: i,
          x: stat[i][2],
          name: "Median",
          marker: { fillColor: medianColor, radius: 5 }
        },
        {
          y: i,
          x: stat[i][3],
          name: "Q3",
          marker: { fillColor: qColor, radius: 4 }
        },
        { y: i, x: stat[i][4], name: "Max", marker: { fillColor: mColor } }
      );
    });
let statCoef = [];
    for (col = 0; col < 5; col++) { statCoef.push([]); for (line = 0; line < chartsNbr; line++) { statCoef[col].push([(x = stat[line][col]), (y = line)]); } }