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

點擊下載Highcharts最新試用版

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

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

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

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

該功能（請查看GitHub鏈接）是小提琴情節(jié)的核心。該函數(shù)圍繞內(nèi)核密度估計（KDE）構(gòu)建。基本上，小提琴圖是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
  };};
}}

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

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

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

創(chuàng)建圖表

圖表創(chuàng)建非常簡單。系列的類型是areasplinerange; 這種圖表類型允許我們使用一個范圍來獲得小提琴的形狀。該范圍是正和負KDE值的計算結(jié)果。該選項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)]); } }