# 折线图
¥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.
# 数据集属性
¥Dataset Properties
命名空间:
¥Namespaces:
data.datasets[index]
- 仅此数据集的选项¥
data.datasets[index]
- options for this dataset onlyoptions.datasets.line
- 所有线数据集的选项¥
options.datasets.line
- options for all line datasetsoptions.elements.line
- 所有 线条元素 的选项¥
options.elements.line
- options for all line elementsoptions.elements.point
- 所有 点元素 的选项¥
options.elements.point
- options for all point elementsoptions
- 整个图表的选项¥
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.
可编写脚本的段的上下文包含以下属性:
¥Context for the scriptable segment contains the following properties:
type
:'segment'
p0
:第一点元素¥
p0
: first point elementp1
:第二点元素¥
p1
: second point elementp0DataIndex
:数据数组中第一个点的索引¥
p0DataIndex
: index of first point in the data arrayp1DataIndex
:数据数组中第二个点的索引¥
p1DataIndex
: index of second point in the data arraydatasetIndex
:数据集索引¥
datasetIndex
: dataset index
# 阶梯式
¥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.
# 配置选项
¥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}