折线图 |
您所在的位置：网站首页 › 折线图多个数据怎么操作 › 折线图 |
|
# 折线图 ¥Line Chart 折线图是一种在线上绘制数据点的方法。通常，它用于显示趋势数据或两个数据集的比较。 ¥A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. const config = { type: 'line', data: data, };const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] };# 数据集属性¥Dataset Properties 命名空间： ¥Namespaces: data.datasets[index] - 仅此数据集的选项 ¥data.datasets[index] - options for this dataset only options.datasets.line - 所有线数据集的选项 ¥options.datasets.line - options for all line datasets options.elements.line - 所有 线条元素 的选项 ¥options.elements.line - options for all line elements options.elements.point - 所有 点元素 的选项 ¥options.elements.point - options for all point elements options - 整个图表的选项 ¥options - options for the whole chart 折线图允许为每个数据集指定许多属性。这些用于设置特定数据集的显示属性。比如一条线的颜色一般都是这样设置的。 ¥The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way. 名称 类型 可编写脚本 可转位 默认 backgroundColor Color 是的 * 'rgba(0, 0, 0, 0.1)' borderCapStyle string 是的 * 'butt' borderColor Color 是的 * 'rgba(0, 0, 0, 0.1)' borderDash number[] 是的 * [] borderDashOffset number 是的 * 0.0 borderJoinStyle 'round'|'bevel'|'miter' 是的 * 'miter' borderWidth number 是的 * 3 clip number|object|false * * undefined cubicInterpolationMode string 是的 * 'default' data object|object[]| number[]|string[] * * required drawActiveElementsOnTop boolean 是的 是的 true fill boolean|string 是的 * false hoverBackgroundColor Color 是的 * undefined hoverBorderCapStyle string 是的 * undefined hoverBorderColor Color 是的 * undefined hoverBorderDash number[] 是的 * undefined hoverBorderDashOffset number 是的 * undefined hoverBorderJoinStyle 'round'|'bevel'|'miter' 是的 * undefined hoverBorderWidth number 是的 * undefined indexAxis string * * 'x' label string * * '' order number * * 0 pointBackgroundColor Color 是的 是的 'rgba(0, 0, 0, 0.1)' pointBorderColor Color 是的 是的 'rgba(0, 0, 0, 0.1)' pointBorderWidth number 是的 是的 1 pointHitRadius number 是的 是的 1 pointHoverBackgroundColor Color 是的 是的 undefined pointHoverBorderColor Color 是的 是的 undefined pointHoverBorderWidth number 是的 是的 1 pointHoverRadius number 是的 是的 4 pointRadius number 是的 是的 3 pointRotation number 是的 是的 0 pointStyle pointStyle 是的 是的 'circle' segment object * * undefined showLine boolean * * true spanGaps boolean|number * * undefined stack string * * 'line' stepped boolean|string * * false tension number * * 0 xAxisID string * * 第一个 x 轴 yAxisID string * * 第一个 y 轴所有这些值，如果 undefined，回退到 选项决议 中描述的范围 ¥All these values, if undefined, fallback to the scopes described in option resolution # 一般的¥General 名称 描述 clip 如何相对于 chartArea 进行裁剪。正值允许溢出，负值会限制 chartArea 内的许多像素。0 = 在图表区域剪辑。裁剪也可以每边配置：clip: {left: 5, top: false, right: -2, bottom: 0} drawActiveElementsOnTop 在数据集的其他点上绘制数据集的活动点 indexAxis 数据集的基轴。'x' 用于水平线，'y' 用于垂直线。 label 出现在图例和工具提示中的数据集标签。 order 数据集的绘制顺序。还会影响堆叠、工具提示和图例的顺序。more stack 此数据集所属组的 ID（堆叠时，每个组将是一个单独的堆栈）。more xAxisID 绘制此数据集的 x 轴的 ID。 yAxisID 用于绘制此数据集的 y 轴的 ID。 # 点样式¥Point Styling 可以使用以下属性控制每个点的样式： ¥The style of each point can be controlled with the following properties: 名称 描述 pointBackgroundColor 点的填充颜色。 pointBorderColor 点的边框颜色。 pointBorderWidth 点边框的宽度（以像素为单位）。 pointHitRadius 响应鼠标事件的非显示点的像素大小。 pointRadius 点形状的半径。如果设置为 0，则不渲染该点。 pointRotation 点的旋转度数。 pointStyle 点的样式。更多...所有这些值，如果是 undefined，首先回退到数据集选项，然后是关联的 elements.point.* 选项。 ¥All these values, if undefined, fallback first to the dataset options then to the associated elements.point.* options. # 折线样式¥Line Styling 可以使用以下属性控制线的样式： ¥The style of the line can be controlled with the following properties: 名称 描述 backgroundColor 线条填充颜色。 borderCapStyle 线帽样式。见 MDN (opens new window)。 borderColor 线条颜色。 borderDash 破折号的长度和间距。见 MDN (opens new window)。 borderDashOffset 虚线的偏移量。见 MDN (opens new window)。 borderJoinStyle 线联合样式。见 MDN (opens new window)。 borderWidth 线宽（以像素为单位）。 fill 如何填充线下的区域。见 面积图。 tension 线的贝塞尔曲线张力。设置为 0 以绘制直线。如果使用单调三次插值，则忽略此选项。 showLine 如果为 false，则不会为此数据集绘制线条。 spanGaps 如果为真，则将在没有数据或数据为空的点之间绘制线条。如果为 false，具有 null 数据的点将在线条中创建一个中断。也可以是指定要跨越的最大间隙长度的数字。值的单位取决于使用的比例。如果值为 undefined，则值回退到关联的 elements.line.* 选项。 ¥If the value is undefined, the values fallback to the associated elements.line.* options. # 交互¥Interactions 可以使用以下属性控制与每个点的交互： ¥The interaction with each point can be controlled with the following properties: 名称 描述 pointHoverBackgroundColor 悬停时点背景颜色。 pointHoverBorderColor 悬停时点边框颜色。 pointHoverBorderWidth 悬停时点的边框宽度。 pointHoverRadius 悬停时点的半径。 # cubicInterpolationMode支持以下插值模式。 ¥The following interpolation modes are supported. 'default' 'monotone' 'default' 算法使用自定义加权三次插值，可为所有类型的数据集生成令人愉悦的曲线。 ¥The 'default' algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets. 'monotone' 算法更适合 y = f(x) 数据集：它保留了被插值数据集的单调性（或分段单调性），并确保局部极值（如果有）留在输入数据点。 ¥The 'monotone' algorithm is more suited to y = f(x) datasets: it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points. 如果保持不变 (undefined)，则使用全局 options.elements.line.cubicInterpolationMode 属性。 ¥If left untouched (undefined), the global options.elements.line.cubicInterpolationMode property is used. # 片段¥Segment segment 对象中的可编写脚本的选项可以覆盖线段样式。目前，支持所有 border* 和 backgroundColor 选项。为每个点之间的线的每个部分解析线段样式。undefined 回退到主线样式。 ¥Line segment styles can be overridden by scriptable options in the segment object. Currently, all of the border* and backgroundColor options are supported. The segment styles are resolved for each section of the line between each point. undefined fallbacks to main line styles. 提示 为了能够设置间隙样式，你需要启用 spanGaps 选项。 ¥To be able to style gaps, you need the spanGaps option enabled. 可编写脚本的段的上下文包含以下属性： ¥Context for the scriptable segment contains the following properties: type：'segment' p0：第一点元素 ¥p0: first point element p1：第二点元素 ¥p1: second point element p0DataIndex：数据数组中第一个点的索引 ¥p0DataIndex: index of first point in the data array p1DataIndex：数据数组中第二个点的索引 ¥p1DataIndex: index of second point in the data array datasetIndex：数据集索引 ¥datasetIndex: dataset index 用法示例 ¥Example usage # 阶梯式¥Stepped stepped 支持以下值。 ¥The following values are supported for stepped. false：无步进插值（默认） ¥false: No Step Interpolation (default) true：插值前步（eq. 'before'） ¥true: Step-before Interpolation (eq. 'before') 'before'：插值前步进 ¥'before': Step-before Interpolation 'after'：步进插值后 ¥'after': Step-after Interpolation 'middle'：步进中间插值 ¥'middle': Step-middle Interpolation 如果 stepped 值设置为 false 以外的任何值，则 tension 将被忽略。 ¥If the stepped value is set to anything other than false, tension will be ignored. # 默认选项¥Default Options 通常希望将配置设置应用于所有创建的折线图。全局折线图设置存储在 Chart.overrides.line 中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。 ¥It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in Chart.overrides.line. Changing the global options only affects charts created after the change. Existing charts are not changed. 例如，要使用 spanGaps = true 配置所有折线图，你可以执行以下操作： ¥For example, to configure all line charts with spanGaps = true you would do: Chart.overrides.line.spanGaps = true; # 数据结构¥Data Structure 所有支持的 数据结构 都可以与折线图一起使用。 ¥All the supported data structures can be used with line charts. # 堆叠面积图¥Stacked Area Chart 通过更改 y 轴上的设置以启用堆叠，可以将折线图配置为堆叠面积图。堆积面积图可用于显示一个数据趋势如何由许多较小的部分组成。 ¥Line charts can be configured into stacked area charts by changing the settings on the y-axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces. const stackedLine = new Chart(ctx, { type: 'line', data: data, options: { scales: { y: { stacked: true } } } }); # 垂直折线图¥Vertical Line Chart 垂直折线图是水平折线图的变体。为此，你必须将选项对象中的 indexAxis 属性设置为 'y'。此属性的默认值为 'x'，因此将显示水平线。 ¥A vertical line chart is a variation on the horizontal line chart. To achieve this, you will have to set the indexAxis property in the options object to 'y'. The default for this property is 'x' and thus will show horizontal lines. const config = { type: 'line', data: data, options: { indexAxis: 'y', scales: { x: { beginAtZero: true } } } };const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ axis: 'y', label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], fill: false, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] };# 配置选项¥Config Options 垂直折线图的配置选项与 折线图 相同。但是，在折线图中的 x 轴上指定的任何选项都将应用于垂直折线图中的 y 轴。 ¥The configuration options for the vertical line chart are the same as for the line chart. However, any options specified on the x-axis in a line chart, are applied to the y-axis in a vertical line chart. # 内部数据格式¥Internal data format {x, y} |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |