彩票走势图

Highcharts是一款纯JavaScript编写的图表库，为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

点击下载Highcharts最新试用版

在本教程中，我们将向您展示如何使用Area Spline图表类型创建多个密度图，也称为脊线图。从下面的演示中您将看到，输出结果看起来不像我们的“默认”区域样条图演示，但是这里是Highcharts真正擅长的地方：尽管99％的用例可以满足于在所有默认情况下运行我们的图表设置，通过检查API并考虑您想要数据故事的内容以及如何最好地对此数据进行预处理，可以带来很多乐趣。

在本教程中，我们将继续这样做，继续探索超级有用的内核密度估计。在先前的教程中，我们使用了高斯核函数来创建单个密度图和小提琴图类型。您可能会问：“等等，小提琴图和密度图在本质上是不是同一张图？” 你会是对的。密度图基本上是从中间分开的小提琴图，其中仅使用一半。即使是一半大小，密度图也不会丢失任何信息，因为小提琴的左侧和右侧只是彼此的镜像。

那么，什么时候使用小提琴或密度图？两种图表类型均用于可视化数据分布及其概率密度。两张图表的形状在较低的密度值时会更亮，而在较高的密度值时会更厚。尽管它们都可以用于显示相同的数据，但是您可以考虑使用密度图来实现紧凑而直接的数据分布可视化。使用小提琴图显示具有描述性统计系数的诱人的密度分布。

下面的演示显示了六个学科的2012年奥运会男运动员的体重密度：

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

• step是最小数据集单位。该步骤用于对数据集进行采样并创建KDE。
• precision 用于细化末端的密度图，在细点处，此参数越小，表示在末端和图表上的细点处获得的点越多。
• densityWidth用于加宽密度。此参数应等于1以反映KDE值的结果。但是，出于可见性目的，您可以自由更改，densityWidth以获取更宽的可见形状。
• args是一个或多个表示数据集的数组。在我们的案例中，args是四组重量级运动员，每个学科一组。

let step = 1,
  precision = 0.00000000001,
  width = 15;
let data = processDensity(
  step,
  precision,
  width,
  dataArray[0], //triathlon,
  dataArray[1], //badminton,
  dataArray[2], //fencing,
  dataArray[3], //rowing,
  dataArray[4], //handball,
  dataArray[5], //cycling,
  dataArray[6] //gymnastics
);

• xiData 是使用运动员体重数据的步长和范围生成的xAxis数据。
• results 包括所有密度图数据。
• stat 是具有所有描述性统计系数的数组。

为了使数据可视化，使用了一个areasplinerange类型图，因为processDensity()返回的是根据areasplinerange格式返回的数据数组结果。

  Highcharts.chart("container", {
        chart: {
          type: "areasplinerange",
          …

events: {
  render() {
    if (!redrawing) {
      redrawing = true;

      this.series.forEach((s) => {
        s.update({
          fillColor: {
            linearGradient: [0, 0, this.plotWidth, 0],
            stops: [
              [0, Highcharts.color("yellow").setOpacity(0).get("rgba")],
              [0.25, "orange"],
              [0.5, "red"],
              [0.6, "purple"]
            ]
          }
        });
      });
      redrawing = false;
    }
  }
}