第五章 坐标轴 · Chartjs |
您所在的位置：网站首页 › 图表坐标轴部分不显示 › 第五章 坐标轴 · Chartjs |
|
第5章 坐标轴
坐标轴是图表的一个组成部分。它们被用来确定如何将数据映射到图表的像素值上。在笛卡尔坐标系的图表中，可以有一个或多个X轴以及1个或多个Y轴将数据点映射到二维的画布上。这类坐标轴被称为“笛卡尔坐标轴”。 在径向图表，比如雷达图，饼状图等，只有一个坐标轴来映射点的坐标和方位。这类坐标轴被称为“径向坐标轴”。 5.1 通用属性以下属性在Chart.js中的任意坐标轴都是通用的： 属性名 数据类型 默认值 描述 display Boolean true 如果设置为false，则在图表视图中隐藏坐标轴。它会覆盖gridLines.display，scaleLabel.display和ticks.display属性 callbacks Object 插入到坐标轴生命周期中的回调函数 weight Number 0 用来对坐标轴进行排序的权重。权重越大，该坐标轴离图标区域就越远 5.1.1回调函数对象有以下几种类型的回调函数可以被用于图表的更新过程中，主要用来改变坐标轴不同点处的参数。 属性名 参数 描述 beforeUpdate axis 更新过程开始前被调用 beforeSetDimensions axis 尺寸被设置前调用 afterSetDimensions axis 尺寸被设置后调用 beforeDataLimits axis 在确定数据的最值之前调用 afterDataLimits axis 在确定数据的最值之后调用 beforeBuildTicks axis 在刻度数组被创建之前调用 afterBuildTicks axis 在刻度数组被创建之后调用。经常被用来过滤刻度数组 beforeTickToLabelConversion axis 在刻度数组被转换为字符串数组之前调用 afterTickToLabelConversion axis 在刻度数组被转换为字符串数组之后调用 beforeCalculateTickRotation axis 在刻度旋转角度被确定之前调用 afterCalculateTickRotation axis 在刻度旋转角度被确定之后调用 beforeFit axis 在将坐标轴适应到画布空间之前调用 afterFit axis 在将坐标轴适应到画布空间之后调用 afterUpdate axis 在更新过程结束之后调用 5.1.2 更新坐标轴的默认配置使用坐标轴服务(Chart.scaleService)可以很方便的更改坐标轴的默认配置。你只需要将部分配置信息传入，这些配置信息将会合并到坐标轴的默认配置并生成新的默认配置。 例如，要将左右的线性坐标轴的最小值设置为0，可以按照如下方式。那么在之后创建的任意线性坐标轴的最小值均为0。 Chart.scaleService.updateScaleDefaults('linear', { ticks: { min: 0 } }); 5.1.3 创建新的坐标轴请参阅第六章二次开发相关的6.5节内容。 5.2 笛卡尔坐标轴符合笛卡尔网格的坐标轴被称为“笛卡尔坐标轴”。笛卡尔坐标轴可被用于线形图、柱状图和气泡图中。Chart.js默认包含四中类型的笛卡尔坐标轴。 linear logarithmic category time 5.2.1 笛卡尔坐标轴通用配置 属性名 数据类型 默认值 描述 type String 要使用的坐标轴类型。可以自定义坐标轴，并注册一个唯一的字符串名称。此属性用来指定图表的坐标轴类型 position String 坐标轴在图表中的位置，可能的位置有：'top', 'left', 'bottom', 'right' offset Boolean false 如果设置为true，额外的空间会被添加到坐标轴的两边，并且坐标轴会自适应画布大小。对于柱状图中的坐标轴，此字段默认为true id String 这里ID的作用是将datasets和坐标轴连接起来 gridLines Object 网格线配置 scaleLabel Object 坐标轴标题配置 ticks Object 刻度配置 5.2.2 刻度配置以下配置选项对于所有的笛卡尔坐标轴都是通用的，但不适用于其他坐标轴。 属性名 数据类型 默认值 描述 autoSkip Boolean true 如果设置为true，则会自动计算可以显示多少刻度标签，以及需要隐藏多少刻度标签。设置为false，则会强制显示所有刻度标签 autoSkipPadding Number 0 在激活autoSkip时水平坐标轴上刻度之间的间距。注：只适用于水平坐标轴 labelOffset Number 0 所显示的刻度标签离对应刻度中心点的偏移量（以像素为单位），即x坐标轴上的刻度标签在y方向上的偏移量，以及y坐标轴上的刻度标签在x方向上的偏移量。注：这可能会导致刻度标签被画布边缘切掉一部分 maxRotation Number 90 刻度标签的最大旋转角度。注：旋转只有在必要的时候才会发生，并且只对水平坐标轴有效 minRotation Number 0 刻度标签的最小旋转角度。注：只对水平坐标轴有效 mirror Boolean false 改变坐标轴刻度标签的位置，在图表内部而不是外部显示刻度标签。注：只对垂直坐标轴有效 padding Number 10 刻度标签与坐标轴之间的间距。当在一个垂直坐标轴上设置时，它指的是刻度标签与坐标轴在X方向上的距离。当在水平坐标轴上设置时，它指的是刻度标签与坐标轴在Y方向上的距离 5.2.3 坐标轴ID属性dataset.xAxisID或dataset.yAxisID必须与坐标系属性scales.xAxes.id或scales.yAxes.id相匹配。这在多坐标系图表中特别有用。 var myChart = new Chart(ctx, { type: 'line', data: { datasets: [{ yAxisID: 'first-y-axis' },{ yAxisID: 'second-y-axis' }] }, options: { scales: { yAxes:[{ id: 'first-y-axis', type: 'linear' }, { id: 'second-y-axis', type: 'linear' }] } } }); 5.2.4 创建多个坐标轴对于笛卡尔坐标轴，可以创建多个X轴和Y轴。你可以通过在xAxes属性和yAxes属性中添加多个配置对象来实现。在添加新的坐标轴时，很重要的一点时，你所指定的坐标轴类型在此实例中未被使用过。 在下面的案例中个，我们创建了两个Y轴，然后我们使用yAxisID属性将dataset映射到正确的坐标轴上。 var myChart = new Chart(ctx,{ type: 'line', data: { datasets: [{ data: [20, 50, 100, 75, 25, 0], label: 'Left dataset', yAxisID: 'left-y-axis' }, { data: [0.1, 0.5, 1.0, 2.0, 1.5, 0], label: 'Right dataset', yAxisID: 'right-y-axis' }], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, options: { scales: { yAxes: [{ id: 'left-y-axis', type: 'linear', position: 'left' }, { id: 'right-y-axis', type: 'linear', position: 'right' }] } } }); 5.3 笛卡尔坐标轴标签如果使用全局配置，图表data属性中的labels数组会被绘制。如果只定义了data.labels，则根据此labels数组绘制标签。如果定义了data.xLabels，并且坐标轴为水平坐标轴，则对于此坐标轴会根据xLabels数组绘制标签。如果定义了data.yLabels，并且坐标轴为垂直轴，则对于此坐标轴会根据yLabels数组绘制标签。 5.3.1 坐标轴标签定义全局定义： let chart = new Chart(ctx, { type: ..., data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: ... }, });作为坐标轴定义的一部分： let chart = new Chart(ctx, { type: ..., data: ..., options: { scales: { xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }] } } }); 5.3.2 刻度配置选项如下的配置选项可以用来配置刻度标签。它们存在于ticks属性中。这些选项扩展了通用标签配置选项。 属性名 数据类型 默认值 描述 labels Array 要显示的标签数组 min String 要显示的最小条目 max String 要显示的最大条目 5.3.3 最大最小条目配置对于min和max属性，它们的值必须位于labels数组中。在下面的例子中，x轴将会显示“March”到“June”: let chart = new Chart(ctx, { type: 'line', data: { datasets: [{ data: [10, 20, 30, 40,50, 60] }], labels: ['January', 'February', 'March', 'April', 'May', 'June'] }, options: { scales: { xAxes: [{ ticks: { min: 'March' } }] } } }); 5.4 线性笛卡尔坐标轴线性坐标轴可以被置于x坐标轴和y坐标轴上。散点图会自动配置一个线形图来使用这些坐标系的x轴。正如名字所表示的，线性插值会被用来确定某个值在坐标轴上的位置。 5.4.1 线性坐标轴的刻度配置选项线性坐标系为刻度配置提供了如下的特有选项，它们全部位于ticks属性下，这些选项扩展了通用的刻度配置选项。 属性名 数据类型 默认值 描述 beginAtZero Boolean 如果设置为true，坐标系将包含0值 min Number 用户定义坐标系的最小值，此值会覆盖从data数据中获取到的最小值 max Number 用户定义坐标系的最大值，此值会覆盖从data数据中获取到的最大值 maxTicksLimit Number 11 画布上显示的最大可度数量以及最大的网格线数量 stepSize Number 用户定义的坐标系刻度的步长 suggestedMax Number 在计算最大数据值时用到 suggestedMin Number 在计算最小值时用到 5.4.2 坐标轴范围设置在给定坐标轴数值范围设置时，非常重要的一点是理解它们之间是如何交互的。 suggestedMax属性和suggestedMin属性只会改变用于设置坐标系的数据值。它们在保持自适应行为时时非常有用的。 let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin); let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);在下面的例子中，最大值为50，但实际坐标系的最大值为100。然而，由于data数组中的最小值比suggestedMin属性的值小，因此，suggestedMin属性的值就会被忽略了。 let chart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'First Dataset', data: [0, 20, 40, 50] }], labels: ['January', 'February', 'March', 'April'] }, options: { scales: { yAxes: [{ ticks: { suggestedMin: 50, suggestedMax: 100 } }] } } });与suggested*属性相反，min和max属性显式设置了坐标轴的端点。当使用这两个属性时，一些数据点可能会不可见。 5.4.3 步长如果设置了步长，坐标系的刻度就会根据步长计算每个刻度，相邻两个刻度之间的差值即是步长。如果没有设置步长，则刻度将会使用最佳的数值算法自动确定。 let options = { scales: { yAxes: [{ ticks: { min: 0, max: 5, stepSize: 0.5 } }] } }; 5.5 对数笛卡尔坐标轴 5.5.1 对数笛卡尔坐标轴的刻度配置选项对数坐标系为刻度配置提供了如下的特有配置选项。它们全部位于ticks属性内。这些配置选项扩展了通用的刻度配置选项。 属性名称 数据类型 默认值 描述 min Number 用户定义的坐标系的最小值，此值会覆盖从data数组中获取到的最小值 max Number 用户定义的坐标系的最大值，此值会覆盖从data数组中获取到的最大值 5.6 时间笛卡尔坐标轴时间坐标系用于显示时间和日期。在创建时间坐标系的刻度时，会基于坐标系大小自动计算最合适的单位。 5.6.1 数据集 5.6.1.1 输入数据在使用时间坐标系时，x轴的数据点可以使用t属性指定： data: [{ x: new Date(), y: 1 }, { t: new Date(), y: 10 }] 5.6.1.2 日期格式在为时间坐标系提供数据时，Chart.js支持Moment.js可以接受到所有格式。详细信息请参阅Moment.js文档。 5.6.2 配置选项时间坐标系提供了如下配置选项。这些配置选项扩展了通用的刻度配置选项。 属性名称 数据类型 默认值 描述 distribution String linear 数据的分布情况 bounds String data 此属性确定了坐标系的界限 ticks.source String auto 刻度的生成方式 time.displayFormats Object 设置显示的时间单位 time.isoWeekday Boolean false 如果此属性的值为true，并且单位为“week”，则一周的第一天为星期一，否则第一天为星期日 time.max Time 如果定义了此值，则会覆盖从data数组中获取到的最大值 time.min Time 如果设置了此值，则会覆盖从data数组中获取到的最小值 time.parser String/Function 自定义日期解析器 time.round String false 如果定义了此值，日期将会在指定单位内四舍五入。请参阅下方的“时间单位”了解允许的单位类型。 time.tooltipFormat String 用于提示栏的moment.js日期格式化字符串 time.unit String false 如果定义了此值，则会将单位强制为指定的类型。 time.stepSize Number 1 网格线之间的步长 time.minUnit String 'millisecond' 时间单位中所使用的最小的时间显示格式 5.6.3 时间单位Chart.js支持如下的时间单位，这些时间单位可以以字符串的形式传递给time.unit属性，从而将时间单位强制限定为指定的单位。 millisecond second minute hour day week month quarter year例如，要创建一个包含以月为单位的时间坐标系的图表，可以使用如下配置： var chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ time: { unit: 'month' } }] } } }); 5.6.4 显示格式有如下几种显示格式可被用于配置选项中，它决定了在不同时间单位下坐标轴的刻度显示方式。请参阅moment.js了解允许的格式化字符串。 名称 默认值 实例 millisecond 'h:mm:ss.SSS a' 11:20:01.123 AM second 'h:mm:ss a' 11:20:01 AM minute 'h:mm a' 11:20 AM hour 'hA 11AM day 'MMM D' Sep 4 week 'll' Sep 4 2015 month 'MMM YYYY' Sep 2015 quarter '[Q]Q - YYYY' Q3 - 2015 year 'YYYY' 2015例如，下面实例将时间单位设置为“quarter”，显示格式设置为显示月和年： var chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ type: 'time', time: { displayFormats: { quarter: 'MMM YYYY' } } }] } } }); 5.6.5 数据分布distribution属性控制着数据在坐标系中的分布方式。 ‘linear’：数据随时间线性分布 'series'：数据等间距分布 var chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ type: 'time', distribution: 'series' }] } } }); 5.6.6 坐标系边界bounds属性控制着坐标系的边界策略。 'data'：确保数据完全可见，位于外部的标签会被移除掉 'ticks'：确保刻度完全可见，位于外部的数据会被删掉 5.6.7 刻度来源ticks.source属性控制了刻度的生成方式 'auto'：根据坐标系尺寸和时间选项生成“最优化”的刻度 'data'：从data对象（包含labels的data对象）生成刻度 'labels'：仅通过用户给定的data.labels值生成刻度 5.6.8 解析器如果此属性的值为一个字符串，则使用moment.js的解析器处理日期格式。如果属性的值为一个函数，则该函数必须要返回一个moment.js对象。 5.7 极坐标极坐标主要用于雷达图和饼图中。这类坐标系会覆盖图标区域，而不是位于某一边。Chart.js默认只包含了一种极坐标轴： linear 5.7.1 线性极坐标轴正如其名，线性极坐标系将会使用线性插值的方式来确定数据值相对于坐标轴中心的位置。 线性极坐标系提供了如下的配置选项。 5.7.1.1 配置选项极坐标系的坐标轴具有ticks、angelLines（从图表中心向外放射的线）、gridLines、pointLabels（雷达图边线的标签）等。 属性名称 类型 描述 angleLines Object 请参阅角线配置 gridLines Object 请参阅网格线配置 pointLabels Object 请参阅点标签配置 ticks Object 请参阅刻度配置 5.7.1.2 刻度配置线性坐标系提供 如下的配置选项。它们均位于ticks属性内。此外，极坐标轴还支持通用刻度配置选项。 属性名称 数据类型 默认值 描述 backdropColor Color 'rgba(255,255,255,0.75)' 刻度标签背景色 backdropPaddingX Number 2 标签的水平间距 backdropPaddingY Number 2 标签的垂直间距 beginAtZero Boolean false 如果设置为true，则坐标轴会包含0点 min Number 用户自定义的最小值，此值将会覆盖通过data数组获取到的最小值 max Number 用户自定义的最大值，此值将会覆盖通过data数组获取到的最大值 maxTicksLimit Number 11 显示的刻度和网格线的最大数量 stepSize Number 用户定义的刻度步长 suggestedMax Number suggestedMin Number showLabelBackdrop Boolean true 如果设置为true，则会在刻度标签上绘制背景色 5.7.1.3 坐标轴范围设置请参阅5.4.2节。 5.7.1.4 步长请参阅5.4.3节。 5.7.1.5 角线配置选项以下配置选项用于配置从图表中心放射到四周的角线的相关信息。它们位于angelLines属性下。 属性名称 数据类型 默认值 描述 display Boolean true 如果设为true，则显示角线，否则不显示 color Color rgba(0,0,0,0.1) 角线的颜色 lineWidth Number 1 角线宽度 5.7.1.6 点标签配置选项以下配置选项用于配置坐标系周边的点标签显示方式。它们位于pointLabels属性下。注意：以下属性只有在pointLabels.display属性设置为true时才会生效。 属性名称 数据类型 默认值 描述 callback Function 将数据标签转换为点标签的回调函数。默认实现只是返回当前字符串 fontColor Color/Color[ ] '#666' 点标签的字体颜色 fontFamily String "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 渲染标签时使用的字体库 fontSize Number 10 字体大小（以像素为单位） fontStyle String 'normal' 渲染点标签时使用的字体样式 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |