当前位置: 首页 > Web前端 > HTML

chart.js官方文档中文翻译

时间:2023-04-02 12:19:05 HTML

条形图条形图提供了一种用竖条表示的数据值显示方式。有时用于显示代表趋势的数据,并同时并排比较多个数据集。{"type":"bar","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"我的第一个数据集","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}]},"options":{"scales":{"yAxes":[{"ticks":{"beginAtZero":true}}]}}}使用示例varmyBarChart=newChart(ctx,{type:'bar',data:data,options:options});数据集属性条形图允许为每个数据集指定多个属性。这些属性用于设置特定数据集的显示效果。例如,这是在条形图中设置条形颜色的常用方法。一些属性可以指定为数组。如果将这些值设置为数组值,则第一个值适用于条形图中的第一个条,第二个值适用于条形图中的第二个条,依此类推。名称类型说明labelString显示在图例和浮动工具提示中的数据集标签xAxisIDString打印此数据集的x轴ID。如果未指定,则默认为第一个找到的x轴的ID以绘制此数据集的yAxisIDString轴的ID。如果未指定,则默认为第一个找到的y轴的ID。backgroundColorColor/Color[]条形的填充颜色,请参见颜色borderColorColor/Color[]条形轮廓描边的颜色,请参见颜色borderWidthNumber/Number[]条形的轮廓描边宽度(以像素为单位)borderSkippedString跳过哪条边来绘制边框。更多...hoverBackgroundColorColor/Color[]hoverBorderColorColor/Color[]hoverBorderColorColor/Color[]hoverBorderWidthNumber/Number[]hover时bar轮廓描边宽度borderSkipped此设置用于避免绘制bar填充底部的描边。通常,除了创建从条形图派生的图表类型外,不需要进行任何更改。选项是:*bottomlefttopright配置选项条形图定义了以下配置选项。这些选项与全局图表配置选项Chart.defaults.global合并,形成传递给图表的选项。NameTypeDefaultDescriptionbarPercentageNumber0.9每个栏的可用宽度的百分比(0-1)应在类别百分比内。1.0将占据类别的整个宽度,并将条形并排放置。More...categoryPercentageNumber0.8用于设置条形图中条形的每个数据点可用宽度的百分比(0-1)(小数据集的网格线间距)。更多...barThicknessNumber以像素为单位手动设置每个条的宽度。如果未设置,则使用barPercentage和categoryPercentage自动缩放条形;maxBarThicknessNumber设置此项以确保自动缩放的尺寸永远不会大于此厚度。仅在未设置barThickness时有效(启用自动调整)。gridLines.offsetGridLinesBooleantrue如果为真,则特定数据点的条线位于网格线之间。如果为false,网格线将沿着条的中间。更多...(offsetGridLines如果为true,则特定数据点的条形线位于网格线之间。如果为false,则网格线将沿着条形的中间。这在真实的开发环境中是不正确的太可能需要有更多方法可以通过配置气泡图来复用坐标轴代码气泡图用于显示一组三维数据,气泡在气泡图中的位置由前两个维度(横坐标x,纵坐标y),气泡的大小由第三个维度r决定。{"type":"bubble","data":{"datasets":[{"label":"第一个数据集","data":[{"X":20,"y":30,"R":15},{"x":40,"y":10,"R":10}],"BackgroundColor":"RGB(255,99,132)"}]},}用法示例//气泡图varmyBubbleChart=newChart(ctx,{type:'bubble',//设置图形类别为气泡图data:data,//设置图形数据选项:options//设置图形属性配置选项});数据集属性气泡图允许为每个数据集指定多个属性。这些用于设置特定数据集的显示属性。例如,这通常是气泡的颜色。除了“标签”可以指定为数组。如果将这些值设置为数组值,则第一个值适用于数据集中的第一个气泡,第二个值适用于第二个气泡,依此类推。名称类型说明labelString中出现的数据集的标签图例和浮动工具提示。backgroundColorColor/Color[]气泡的填充颜色。borderColorColor/Color[]气泡的轮廓描边颜色。borderWidthNumber/Number[]气泡轮廓描边的宽度(以像素为单位)。hoverBackgroundColorColor/Color[]悬停时气泡的背景颜色。hoverBorderColorColor/Color[]悬停时气泡的边框颜色。hoverBorderWidthNumber/Number[]悬停点的边框宽度。hoverRadiusNumber/Number[]在悬停时添加到数据半径的附加半径。配置选项气泡图没有唯一的配置选项。要配置所有气泡通用的选项,请使用[pointelementoptions](../configuration/elements/point.md#point-configuration)。默认选项我们还可以更改气泡图类型的默认值。这样做会导致之后创建的所有气泡图都创建新的默认值。可以在Chart.defaults.bubble中访问气泡图的默认配置。数据结构对于气泡图,数据集需要包含一组数据点。每个点都必须实现[气泡数据对象](#bubble-data-object)接口。气泡数据对象气泡图的数据以对象的形式传递。对象必须实现以下接口。请务必注意,图中的半径属性r不可缩放。它表示气泡图上相应气泡的原始半径(以像素为单位)。{//X轴坐标值x:,//Y轴坐标值y:,//气泡的半径(不可缩放)。r:<数字>}