项目作者: datavisyn

项目描述 :
Chart.js Box Plot addon
高级语言: JavaScript
项目地址: git://github.com/datavisyn/chartjs-chart-box-and-violin-plot.git
创建时间: 2017-11-26T10:42:11Z
项目社区:https://github.com/datavisyn/chartjs-chart-box-and-violin-plot

开源协议:BSD 3-Clause "New" or "Revised" License

下载


DEPRECATED: Chart.js Box and Violin Plot

Target Discovery Platform NPM Package CircleCI

Chart.js module for charting box and violin plots. Works only with Chart.js >= 2.8.0

Box Plot
Violin Plot

DEPRECATION Information

Please note that this project has been archived and is no longer being maintained. There is an active fork https://github.com/sgratzl/chartjs-chart-boxplot and we will also contribute our future changes to it.

Install

  1. npm install --save chart.js chartjs-chart-box-and-violin-plot

Usage

see Samples on Github

and CodePen

Chart

four new types: boxplot, horizontalBoxplot, violin, and horizontalViolin.

Config

  1. /**
  2. * Limit decimal digits by an optional config option
  3. **/
  4. tooltipDecimals?: number;

Styling

The boxplot element is called boxandwhiskers. The basic options are from the rectangle element. The violin element is called violin also based on the rectangle element.

  1. interface IBaseStyling {
  2. /**
  3. * @default see rectangle
  4. * @scriptable
  5. * @indexable
  6. */
  7. backgroundColor: string;
  8. /**
  9. * @default see rectangle
  10. * @scriptable
  11. * @indexable
  12. */
  13. borderColor: string;
  14. /**
  15. * @default null takes the current borderColor
  16. * @scriptable
  17. * @indexable
  18. */
  19. medianColor: string;
  20. /**
  21. * @default 1
  22. * @scriptable
  23. * @indexable
  24. */
  25. borderWidth: number;
  26. /**
  27. * radius used to render outliers
  28. * @default 2
  29. * @scriptable
  30. * @indexable
  31. */
  32. outlierRadius: number;
  33. /**
  34. * @default see rectangle.backgroundColor
  35. * @scriptable
  36. * @indexable
  37. */
  38. outlierColor: string;
  39. /**
  40. * to fill color below the median line of the box
  41. * @default see rectangle.lowerColor
  42. * @scriptable
  43. * @indexable
  44. */
  45. lowerColor: string;
  46. /**
  47. * radius used to render items
  48. * @default 0 so disabled
  49. * @scriptable
  50. * @indexable
  51. */
  52. itemRadius: number;
  53. /**
  54. * item style used to render items
  55. * @default circle
  56. */
  57. itemStyle: 'circle'|'triangle'|'rect'|'rectRounded'|'rectRot'|'cross'|'crossRot'|'star'|'line'|'dash';
  58. /**
  59. * background color for items
  60. * @default see rectangle backgroundColor
  61. * @scriptable
  62. * @indexable
  63. */
  64. itemBackgroundColor: string;
  65. /**
  66. * border color for items
  67. * @default see rectangle backgroundColor
  68. * @scriptable
  69. * @indexable
  70. */
  71. itemBorderColor: string;
  72. /**
  73. * padding that is added around the bounding box when computing a mouse hit
  74. * @default 1
  75. * @scriptable
  76. * @indexable
  77. */
  78. hitPadding: number;
  79. /**
  80. * hit radius for hit test of outliers
  81. * @default 4
  82. * @scriptable
  83. * @indexable
  84. */
  85. outlierHitRadius: number;
  86. }
  87. interface IBoxPlotStyling extends IBaseStyling {
  88. // no extra styling options
  89. }
  90. interface IViolinStyling extends IBaseStyling {
  91. /**
  92. * number of sample points of the underlying KDE for creating the violin plot
  93. * @default 100
  94. */
  95. points: number;
  96. }

In addition, two new scales were created arrayLinear and arrayLogarithmic. They were needed to adapt to the required data structure.

Scale Options

Both arrayLinear and arrayLogarithmic support the two additional options to their regular counterparts:

  1. interface IArrayLinearScale {
  2. ticks: {
  3. /**
  4. * statistic measure that should be used for computing the minimal data limit
  5. * @default 'min'
  6. */
  7. minStats: 'min'|'q1'|'whiskerMin';
  8. /**
  9. * statistic measure that should be used for computing the maximal data limit
  10. * @default 'max'
  11. */
  12. maxStats: 'max'|'q3'|'whiskerMax';
  13. /**
  14. * from the R doc: this determines how far the plot ‘whiskers’ extend out from
  15. * the box. If coef is positive, the whiskers extend to the most extreme data
  16. * point which is no more than coef times the length of the box away from the
  17. * box. A value of zero causes the whiskers to extend to the data extremes
  18. * @default 1.5
  19. */
  20. coef: number;
  21. /**
  22. * the method to compute the quantiles. 7 and 'quantiles' refers to the type-7 method as used by R 'quantiles' method. 'hinges' and 'fivenum' refers to the method used by R 'boxplot.stats' method.
  23. * @default 7
  24. */
  25. quantiles: 7 | 'quantiles' | 'hinges' | 'fivenum' | ((sortedArr: number[]) => {min: number, q1: number, median: number, q3: number, max: number});
  26. };
  27. }

Data structure

Both types support that the data is given as an array of numbers number[]. The statistics will be automatically computed. In addition, specific summary data structures are supported:

  1. interface IBaseItem {
  2. min: number;
  3. median: number;
  4. max: number;
  5. /**
  6. * values of the raw items used for rendering jittered background points
  7. */
  8. items?: number[];
  9. }
  10. interface IBoxPlotItem extends IBaseItem {
  11. q1: number;
  12. q3: number;
  13. whiskerMin?: number;
  14. whiskerMax?: number;
  15. /**
  16. * list of box plot outlier values
  17. */
  18. outliers?: number[];
  19. }
  20. interface IKDESamplePoint {
  21. /**
  22. * sample value
  23. */
  24. v: number;
  25. /**
  26. * sample estimation
  27. */
  28. estimate: number;
  29. }
  30. interface IViolinItem extends IBaseItem {
  31. /**
  32. * samples of the underlying KDE
  33. */
  34. coords: IKDESamplePoint[];
  35. }

Note: The statistics will be cached within the array. Thus, if you manipulate the array content without creating a new instance the changes won’t be reflected in the stats. See also CodePen for a comparison.

Tooltips

In order to simplify the customization of the tooltips, two additional tooltip callback methods are available. Internally the label callback will call the correspondig callback depending on the type.

  1. arr = {
  2. options: {
  3. tooltips: {
  4. callbacks: {
  5. /**
  6. * custom callback for boxplot tooltips
  7. * @param item see label callback
  8. * @param data see label callback
  9. * @param stats {IBoxPlotItem} the stats of the hovered element
  10. * @param hoveredOutlierIndex {number} the hovered outlier index or -1 if none
  11. * @return {string} see label callback
  12. */
  13. boxplotLabel: function(item, data, stats, hoveredOutlierIndex) {
  14. return 'Custom tooltip';
  15. },
  16. /**
  17. * custom callback for violin tooltips
  18. * @param item see label callback
  19. * @param data see label callback
  20. * @param stats {IViolinItem} the stats of the hovered element
  21. * @return {string} see label callback
  22. */
  23. violinLabel: function(item, data, stats) {
  24. return 'Custom tooltip';
  25. },
  26. }
  27. }
  28. }
  29. }

Building

  1. npm install
  2. npm run build

Angular CLI Usage

Here is an example project based on Angular CLI with Angular 7 dependencies: https://github.com/sluger/ng-chartjs-boxplot

The incomaptibility with Webpack 4, mjs and Angular CLI can be solved by importing the chartjs boxplot library via the .js build artifact:

  1. import "chartjs-chart-box-and-violin-plot/build/Chart.BoxPlot.js";


This repository is part of the Target Discovery Platform (TDP). For tutorials, API docs, and more information about the build and deployment process, see the documentation page.