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

點(diǎn)擊下載Highcharts最新試用版

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

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

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

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

該功能（請(qǐng)查看GitHub鏈接）是小提琴情節(jié)的核心。該函數(shù)圍繞內(nèi)核密度估計(jì)（KDE）構(gòu)建?；旧希√崆賵D是KDE，其負(fù)片彼此相對(duì)顯示。該函數(shù)獲取數(shù)據(jù)集（在我們的情況下為運(yùn)動(dòng)員的體重）以及一些其他參數(shù)，然后生成密度形狀和描述性統(tǒng)計(jì)量度：這是函數(shù)參數(shù)的描述：

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

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

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

• xiData是使用運(yùn)動(dòng)員體重?cái)?shù)據(jù)的步長(zhǎng)和范圍生成的xAxis數(shù)據(jù)。
• results包括所有小提琴圖數(shù)據(jù)。
• stat是具有所有描述性統(tǒng)計(jì)系數(shù)的數(shù)組。

創(chuàng)建圖表

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

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

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

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

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