九九天天影视,天天操屄,精品动漫区一区二在线观看

開源圖表庫Highcharts教程：如何創(chuàng)建交互式小提琴圖

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

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

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

點擊下載Highcharts最新試用版

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

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

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

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

現(xiàn)在，該探討代碼部分了。
該代碼分為兩個主要部分：

處理小提琴數(shù)據(jù)。
創(chuàng)建圖表。

處理小提琴數(shù)據(jù)

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

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

step是最小數(shù)據(jù)集單位。該步驟用于對數(shù)據(jù)集進行采樣并創(chuàng)建KDE。

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

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

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

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

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

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

創(chuàng)建圖表

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

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

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

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

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

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

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

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

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