Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

06-Polar-Area-Chart.md 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. ---
  2. title: Polar Area Chart
  3. anchor: polar-area-chart
  4. ---
  5. ### Introduction
  6. Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
  7. This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
  8. <div class="canvas-holder">
  9. <canvas width="250" height="125"></canvas>
  10. </div>
  11. ### Example Usage
  12. ```javascript
  13. new Chart(ctx, {
  14. data: data,
  15. type: 'polarArea',
  16. options: options
  17. });
  18. ```
  19. ### Data Structure
  20. The following options can be included in a polar area chart dataset to configure options for that specific dataset.
  21. Some properties are specified as arrays. The first value applies to the first bar, the second value to the second bar, and so on.
  22. Property | Type | Usage
  23. --- | --- | ---
  24. data | `Array<Number>` | The data to plot as bars
  25. label | `String` | The label for the dataset which appears in the legend and tooltips
  26. backgroundColor | `Array<Color>` | The fill color of the arcs. See [Colors](#getting-started-colors)
  27. borderColor | `Array<Color>` | Arc border color
  28. borderWidth | `Array<Number>` | Border width of arcs in pixels
  29. hoverBackgroundColor | `Array<Color>` | Arc background color when hovered
  30. hoverBorderColor | `Array<Color>` | Arc border color when hovered
  31. hoverBorderWidth | `Array<Number>` | Border width of arc when hovered
  32. An example data object using these attributes is shown below.
  33. ```javascript
  34. var data = {
  35. datasets: [{
  36. data: [
  37. 11,
  38. 16,
  39. 7,
  40. 3,
  41. 14
  42. ],
  43. backgroundColor: [
  44. "#FF6384",
  45. "#4BC0C0",
  46. "#FFCE56",
  47. "#E7E9ED",
  48. "#36A2EB"
  49. ],
  50. label: 'My dataset' // for legend
  51. }],
  52. labels: [
  53. "Red",
  54. "Green",
  55. "Yellow",
  56. "Grey",
  57. "Blue"
  58. ]
  59. };
  60. ```
  61. As you can see, for the chart data you pass in an array of objects, with a value and a colour. The value attribute should be a number, while the color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL.
  62. ### Chart Options
  63. These are the customisation options specific to Polar Area charts. These options are merged with the [global chart configuration options](#global-chart-configuration), and form the options of the chart.
  64. Name | Type | Default | Description
  65. --- | --- | --- | ---
  66. scale | Object | [See Scales](#scales) and [Defaults for Radial Linear Scale](#scales-radial-linear-scale) | Options for the one scale used on the chart. Use this to style the ticks, labels, and grid.
  67. *scale*.type | String |"radialLinear" | As defined in ["Radial Linear"](#scales-radial-linear-scale).
  68. *scale*.lineArc | Boolean | true | When true, lines are circular.
  69. *animation*.animateRotate | Boolean |true | If true, will animate the rotation of the chart.
  70. *animation*.animateScale | Boolean | true | If true, will animate scaling the chart.
  71. *legend*.*labels*.generateLabels | Function | `function(data) {} ` | Returns labels for each the legend
  72. *legend*.onClick | Function | function(event, legendItem) {} ` | Handles clicking an individual legend item
  73. legendCallback | Function | `function(chart) ` | Generates the HTML legend via calls to `generateLegend`
  74. You can override these for your `Chart` instance by passing a second argument into the `PolarArea` method as an object with the keys you want to override.
  75. For example, we could have a polar area chart with a black stroke on each segment like so:
  76. ```javascript
  77. new Chart(ctx, {
  78. data: data,
  79. type: "polarArea",
  80. options: {
  81. elements: {
  82. arc: {
  83. borderColor: "#000000"
  84. }
  85. }
  86. }
  87. });
  88. // This will create a chart with all of the default options, merged from the global config,
  89. // and the PolarArea chart defaults but this particular instance will have `elements.arc.borderColor` set to `"#000000"`.
  90. ```
  91. We can also change these defaults values for each PolarArea type that is created, this object is available at `Chart.defaults.polarArea`.