Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

03-Line-Chart.md 7.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. ---
  2. title: Line Chart
  3. anchor: line-chart
  4. ---
  5. ### Introduction
  6. A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the comparison of two data sets.
  7. <div class="canvas-holder">
  8. <canvas width="250" height="125"></canvas>
  9. </div>
  10. ### Example Usage
  11. ```javascript
  12. var myLineChart = new Chart(ctx, {
  13. type: 'line',
  14. data: data,
  15. options: options
  16. });
  17. ```
  18. Alternatively a line chart can be created using syntax similar to the v1.0 syntax
  19. ```javascript
  20. var myLineChart = Chart.Line(ctx, {
  21. data: data,
  22. options: options
  23. });
  24. ```
  25. ### Data Structure
  26. The following options can be included in a line chart dataset to configure options for that specific dataset.
  27. All point* properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on.
  28. Property | Type | Usage
  29. --- | --- | ---
  30. data | See [data point](#line-chart-data-points) section | The data to plot in a line
  31. label | `String` | The label for the dataset which appears in the legend and tooltips
  32. xAxisID | `String` | The ID of the x axis to plot this dataset on
  33. yAxisID | `String` | The ID of the y axis to plot this dataset on
  34. fill | `Boolean` | If true, fill the area under the line
  35. lineTension | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. *Note* This was renamed from 'tension' but the old name still works.
  36. backgroundColor | `Color` | The fill color under the line. See [Colors](#getting-started-colors)
  37. borderWidth | `Number` | The width of the line in pixels
  38. borderColor | `Color` | The color of the line.
  39. borderCapStyle | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)
  40. borderDash | `Array<Number>` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
  41. borderDashOffset | `Number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
  42. borderJoinStyle | `String` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
  43. pointBorderColor | `Color or Array<Color>` | The border color for points.
  44. pointBackgroundColor | `Color or Array<Color>` | The fill color for points
  45. pointBorderWidth | `Number or Array<Number>` | The width of the point border in pixels
  46. pointRadius | `Number or Array<Number>` | The radius of the point shape. If set to 0, nothing is rendered.
  47. pointHoverRadius | `Number or Array<Number>` | The radius of the point when hovered
  48. pointHitRadius | `Number or Array<Number>` | The pixel size of the non-displayed point that reacts to mouse events
  49. pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
  50. pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
  51. pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
  52. pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`.
  53. showLine | `Boolean` | If false, the line is not drawn for this dataset
  54. spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data
  55. An example data object using these attributes is shown below.
  56. ```javascript
  57. var data = {
  58. labels: ["January", "February", "March", "April", "May", "June", "July"],
  59. datasets: [
  60. {
  61. label: "My First dataset",
  62. fill: false,
  63. lineTension: 0.1,
  64. backgroundColor: "rgba(75,192,192,0.4)",
  65. borderColor: "rgba(75,192,192,1)",
  66. borderCapStyle: 'butt',
  67. borderDash: [],
  68. borderDashOffset: 0.0,
  69. borderJoinStyle: 'miter',
  70. pointBorderColor: "rgba(75,192,192,1)",
  71. pointBackgroundColor: "#fff",
  72. pointBorderWidth: 1,
  73. pointHoverRadius: 5,
  74. pointHoverBackgroundColor: "rgba(75,192,192,1)",
  75. pointHoverBorderColor: "rgba(220,220,220,1)",
  76. pointHoverBorderWidth: 2,
  77. pointRadius: 1,
  78. pointHitRadius: 10,
  79. data: [65, 59, 80, 81, 56, 55, 40],
  80. spanGaps: false,
  81. }
  82. ]
  83. };
  84. ```
  85. The line chart usually requires an array of labels. This labels are shown on the X axis. There must be one label for each data point. More labels than datapoints are allowed, in which case the line ends at the last data point.
  86. The data for line charts is broken up into an array of datasets. Each dataset has a colour for the fill, a colour for the line and colours for the points and strokes of the points. These colours are strings just like CSS. You can use RGBA, RGB, HEX or HSL notation.
  87. The label key on each dataset is optional, and can be used when generating a scale for the chart.
  88. When `spanGaps` is set to true, the gaps between points in sparse datasets are filled in. By default, it is off.
  89. ### Data Points
  90. The data passed to the chart can be passed in two formats. The most common method is to pass the data array as an array of numbers. In this case, the `data.labels` array must be specified and must contain a label for each point or, in the case of labels to be displayed over multiple lines an array of labels (one for each line) i.e `[["June","2015"], "July"]`.
  91. The alternate is used for sparse datasets. Data is specified using an object containing `x` and `y` properties. This is used for scatter charts as documented below.
  92. ### Scatter Line Charts
  93. Scatter line charts can be created by changing the X axis to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 3 points.
  94. ```javascript
  95. var scatterChart = new Chart(ctx, {
  96. type: 'line',
  97. data: {
  98. datasets: [{
  99. label: 'Scatter Dataset',
  100. data: [{
  101. x: -10,
  102. y: 0
  103. }, {
  104. x: 0,
  105. y: 10
  106. }, {
  107. x: 10,
  108. y: 5
  109. }]
  110. }]
  111. },
  112. options: {
  113. scales: {
  114. xAxes: [{
  115. type: 'linear',
  116. position: 'bottom'
  117. }]
  118. }
  119. }
  120. });
  121. ```
  122. ### Chart Options
  123. These are the customisation options specific to Line charts. These options are merged with the [global chart configuration options](#chart-configuration-global-configuration), and form the options of the chart.
  124. Name | Type | Default | Description
  125. --- | --- | --- | ---
  126. showLines | Boolean | true | If false, the lines between points are not drawn
  127. You can override these for your `Chart` instance by passing a member `options` into the `Line` method.
  128. For example, we could have a line chart display without an X axis by doing the following. The config merge is smart enough to handle arrays so that you do not need to specify all axis settings to change one thing.
  129. ```javascript
  130. new Chart(ctx, {
  131. type: 'line',
  132. data: data,
  133. options: {
  134. scales: {
  135. xAxes: [{
  136. display: false
  137. }]
  138. }
  139. }
  140. });
  141. ```
  142. We can also change these defaults values for each Line type that is created, this object is available at `Chart.defaults.line`.
  143. ### Stacked Charts
  144. Stacked area charts can be created by setting the Y axis to a stacked configuration. The following example would have stacked lines.
  145. ```javascript
  146. var stackedLine = new Chart(ctx, {
  147. type: 'line',
  148. data: data,
  149. options: {
  150. scales: {
  151. yAxes: [{
  152. stacked: true
  153. }]
  154. }
  155. }
  156. });
  157. ```