chart. js 官方文档中文译本

isaced 发布于2019-08-01 16:43 / 1093人阅读

摘要：条形图条形图提供了一种显示以垂直长条表示的数据值的方式。这些属性用于设置特定数据集的显示效果。这样做将使所有创建的气泡图在此之后创建新的默认值。重要的是要注意，图表中的属性是不可缩放的。它表示在气泡图上对应的气泡的原始半径以像素为单位。

条形图

条形图提供了一种显示以垂直长条表示的数据值的方式。有时用于显示代表某一趋势的数据，并且可同时并排比较多个数据集。

{
"type": "bar",
"data": {
"labels": [
"January", 
"February", 
"March", 
"April", 
"May", 
"June", 
"July"
],
"datasets": [{
"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
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}

使用示例

var myBarChart = new Chart(ctx, {
type: "bar",
data: data,
options: options
});

数据集属性

条形图允许为每个数据集指定多个属性。这些属性用于设置特定数据集的显示效果。例如，通常这样设置条形图中长条的颜色。

一些属性可以指定为数组。如果这些值设置为数组值，则第一个值适用于条形图中第一个长条，第二个值应用于条形图中第二个长条，以此类推。

名称	类型	描述
label	String	数据集的标签出现在图例和浮动提示框中
xAxisID	String	打印此数据集的x轴的ID.如果未指定，则默认为第一个找到的x轴的ID
yAxisID	String	要绘制此数据集的y轴的ID.如果未指定，则默认为首次找到的y轴的ID
backgroundColor	Color/Color[]	条形图的填充颜色,请参阅颜色
borderColor	Color/Color[]	条形图轮廓描边的颜色,请参阅颜色
borderWidth	Number / Number []	条的轮廓描边宽度（以像素为单位）
borderSkipped	String	哪个边缘跳过绘制边框.更多...
hoverBackgroundColor	Color/Color[]	悬停时条形图的填充颜色
hoverBorderColor	Color/Color[]	悬停时条形图的轮廓描边颜色
hoverBorderWidth	Number / Number []	悬停时条形图轮廓描边宽度

borderSkipped

此设置用于避免在填充底部绘制条形笔触。一般来说，除了创建从条形图导出的图表类型之外，不需要更改。

选项是：
*bottom

left

top

right

配置选项

条形图定义了以下配置选项。这些选项与全局图表配置选项Chart.defaults.global合并，以形成传递到图表的选项。

名称	类型	默认	描述
barPercentage	Number	0.9	每个栏的可用宽度的百分比（0-1）应在类别百分比内。 1.0将占据整个类别的宽度，并将条形图放在彼此旁边。更多...
categoryPercentage	Number	0.8	用于设置条形图中长条的每个数据点的可用宽度的百分比（0-1）（小数据集的网格线之间的间距）。更多...
barThickness	Number		手动设置每个栏的宽度（以像素为单位）。如果未设置，则使用barPercentage和categoryPercentage自动调整条形图;
maxBarThickness	Number		设置此项以确保自动调整的尺寸的尺寸不会大于此厚度。仅当barThickness未设置（启用自动调整大小）时才起作用。
gridLines.offsetGridLines	Boolean	true	如果为true，则特定数据点的条形线落在网格线之间。如果为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）”
        }]
    }，
}

使用示例

//气泡图
var myBubbleChart = new Chart(ctx,{
    type: "bubble",//设置图形类别为气泡图
    data: data, //设置图形数据
    options: options//设置图形属性配置选项
});

数据集属性

气泡图允许为每个数据集指定多个属性。这些用于设置特定数据集的显示属性。例如，通常这样设置气泡的颜色。

除“label”之外的所有属性都可以指定为数组。如果将这些值设置为数组值，则第一个值适用于数据集中的第一个气泡，第二个值适用于第二个气泡，以此类推。

名称	类型	描述
label	String	数据集的标签出现在图例和浮动提示框中。
backgroundColor	Color/Color[]	气泡的填充颜色。
borderColor	Color/Color[]	气泡的轮廓描边颜色。
borderWidth	Number / Number []	气泡的轮廓描边的宽度(以像素为单位)。
hoverBackgroundColor	Color/Color[]	悬停时的气泡背景颜色。
hoverBorderColor	Color/Color[]	悬停时的气泡边框颜色。
hoverBorderWidth	Number / Number []	悬停时点的边界宽度。
hoverRadius	Number / Number []	悬停时添加到数据半径的附加半径。

配置选项

气泡图没有唯一的配置选项。要配置所有气泡共有的选项，使用[point element options]（../ configuration / elements / point.md＃point-configuration）。

默认选项

我们也可以更改气泡图类型的默认值。这样做将使所有创建的气泡图在此之后创建新的默认值。气泡图的默认配置可以在Chart.defaults.bubble中访问。

数据结构

对于气泡图，数据集需要包含一组数据点。每个点都必须实现[bubble data object]（＃bubble-data-object）接口。

Bubble Data Object

气泡图的数据以对象的形式传递。对象必须实现以下界面。重要的是要注意，图表中的radius属性r是不可缩放的。它表示在气泡图上对应的气泡的原始半径（以像素为单位）。

{
    // X轴坐标的值
    x：，

    // Y轴坐标的值
    y：，

    //气泡的半径大小(不可缩放)。
    r：
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50706.html

chart. js 官方文档中文译本

摘要：条形图条形图提供了一种显示以垂直长条表示的数据值的方式。这些属性用于设置特定数据集的显示效果。这样做将使所有创建的气泡图在此之后创建新的默认值。重要的是要注意，图表中的属性是不可缩放的。它表示在气泡图上对应的气泡的原始半径以像素为单位。条形图条形图提供了一种显示以垂直长条表示的数据值的方式。有时用于显示代表某一趋势的数据，并且可同时并排比较多个数据集。 { type: bar, d...

chengtao1633 2019-08-20 16:02 评论0 收藏0
Spring MVC官方文档翻译稿发布

摘要：前后经过九个月，我翻译的官方版本中文文档可以发布第一个较为完整的版本了。这点原本是最重要的，但让位于符合中文习惯，是因为如果译本有机翻痕迹，给人的品质感和可信度就降低了更准确和更优雅的翻译风格。 showImg(/img/remote/1460000006773992); 前后经过九个月，我翻译的Spring MVC官方4.2.4版本中文文档可以发布第一个较为完整的版本了。译文上尽量做...

高胜山 2019-08-14 14:14 评论0 收藏0
Spring Cloud实战(三)-Spring Cloud Netflix Ribbon

摘要：概要什么是实战整合实现负载均衡是什么是一个客户端负载均衡的组件什么是负载均衡负载均衡就是分发请求流量到不同的服务器目前的实现有软件和硬件负载均衡分为两种服务器端负载均衡如上图所示服务器端负载均衡是对客户透明的用户请求到服务器真正的服务器是由概要什么是Spring Cloud Netflix Ribbon？实战:整合Ribbon实现负载均衡 Spring Cloud Netfl...

wangbinke 2019-08-14 14:26 评论0 收藏0
Chart.js使用小结_024

摘要：使用小结官方文档英文文档中文文档在中的使用开始使用在相应的页面中引入先写一个小的作图动态更新的数据作图更新数据 Chart.js使用小结官方文档英文文档 https://www.chartjs.org/docs/...中文文档 https://chartjs-doc.abingoal.com 在react中的使用开始使用 npm install chart.js --save ...

tuomao 2019-08-26 10:39 评论0 收藏0