雷达图 |
您所在的位置：网站首页 › 雷达图字体显示不完整怎么回事 › 雷达图 |
|
# 雷达图 ¥Radar Chart 雷达图是一种显示多个数据点及其之间变化的方式。 ¥A radar chart is a way of showing multiple data points and the variation between them. 它们通常可用于比较两个或多个不同数据集的点。 ¥They are often useful for comparing the points of two or more different data sets. const config = { type: 'radar', data: data, options: { elements: { line: { borderWidth: 3 } } }, };const data = { labels: [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ], datasets: [{ label: 'My First Dataset', data: [65, 59, 90, 81, 56, 55, 40], fill: true, backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgb(255, 99, 132)', pointBackgroundColor: 'rgb(255, 99, 132)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(255, 99, 132)' }, { label: 'My Second Dataset', data: [28, 48, 40, 19, 96, 27, 100], fill: true, backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgb(54, 162, 235)', pointBackgroundColor: 'rgb(54, 162, 235)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgb(54, 162, 235)' }] };# 数据集属性¥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 radar 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 hoverBackgroundColor Color 是的 * undefined hoverBorderCapStyle string 是的 * undefined hoverBorderColor Color 是的 * undefined hoverBorderDash number[] 是的 * undefined hoverBorderDashOffset number 是的 * undefined hoverBorderJoinStyle 'round'|'bevel'|'miter' 是的 * undefined hoverBorderWidth number 是的 * undefined clip number|object|false * * undefined data number[] * * required fill boolean|string 是的 * false label string * * '' order number * * 0 tension 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' spanGaps boolean * * undefined所有这些值，如果 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} label 出现在图例和工具提示中的数据集标签。 order 数据集的绘制顺序。还会影响工具提示和图例的顺序。more # 点样式¥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 以绘制直线。 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 悬停时点的半径。 # 标尺选项¥Scale Options 雷达图仅支持单一刻度。此比例的选项在 scales.r 属性中定义，可从 线性径向轴页面 中引用。 ¥The radar chart supports only a single scale. The options for this scale are defined in the scales.r property, which can be referenced from the Linear Radial Axis page. options = { scales: { r: { angleLines: { display: false }, suggestedMin: 50, suggestedMax: 100 } } }; # 默认选项¥Default Options 通常希望将配置设置应用于所有创建的雷达图。全局雷达图设置存储在 Chart.overrides.radar 中。更改全局选项只会影响更改后创建的图表。现有图表不会更改。 ¥It is common to want to apply a configuration setting to all created radar charts. The global radar chart settings are stored in Chart.overrides.radar. Changing the global options only affects charts created after the change. Existing charts are not changed. # 数据结构¥Data Structure 雷达图数据集的 data 属性指定为数字数组。数据数组中的每个点对应于同一索引处的标签。 ¥The data property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index. data: [20, 10]对于雷达图，为了提供每个点含义的上下文，我们在图表中的每个点周围包含了一个字符串数组。 ¥For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart. data: { labels: ['Running', 'Swimming', 'Eating', 'Cycling'], datasets: [{ data: [20, 10, 4, 2] }] } # 内部数据格式¥Internal data format {x, y} |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |