图表简介JS 2.0

>本文是我们的现代JavaScript >同行。 感谢所有SitePoint的同行评审！ 数据繁多的网站需要有效的数据可视化。 原始数字对于人类很难掌握。图表和图形也提供直观，可访问的替代方案，即使对于非英语扬声器也是如此。 清晰的视觉效果增强了理解和网站吸引力。

>本教程介绍了javaScript图表库Chart.js。 通过六个示例，我们将演示其使用和配置。>

Chart.js 2.0的关键功能：

>

>多种图表创建的多功能和用户友好的JavaScript库。

简单的安装和快速学习曲线。

支持各种图表：线，条，雷达，极性区域，馅饼和甜甜圈。 图表类型很容易通过>属性更改。

增强功能：移动响应能力和集成的标题。
• >
>可自定义的交互性（例如，通过传奇点击切换数据集）。
外观的广泛自定义选项（颜色，工具提示，动画）。>
• type
为什么要绘制图表？
• Chart.js与功能强大的自定义平衡。 它避免了更复杂的库的陡峭学习曲线，同时提供了足够的灵活性。 它的八种图表类型涵盖了大多数可视化需求。 积极的开源社区可确保高质量的维护。 2.0版推出了大量的语法改进和移动支持。 本教程使用Chart.JS 2.0。 包括1.0至2.0转换的部分。
>
• 安装图表：

Chart.js优先考虑简单性。 最简单的安装方法是通过cdn：

> >您还需要一个

元素：

>另外，请使用软件包管理器（有关详细信息，请参见“入门指南”）。 >让我们探索Chart.js的功能。

线图：

<🎜>

此最小线图演示了图表。 <canvas></canvas>

<canvas id="myChart"></canvas>

请参见Codepen示例

>说明：

：获取

>的2D渲染上下文。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});

：创建图表对象。 指定图表类型； 保存图表数据。 数组索引确定图形位置。

> PRO提示：

单击传说切换数据集。这适用于所有图表类型。

• ctx条形图：<canvas></canvas>

在上一个示例中，只需将type: 'line'更改为type: 'bar'>

>>

请参见Codepen示例
雷达图：

type 'radar'更改为。 调整backgroundColor>和borderColor，以通过重叠数据更好地可读性。

>

请参见Codepen示例

极图：

更改为。 极性图表可视化单个数据集。type 'polarArea'

请参见Codepen示例
pie和甜甜圈图表：

> 更改为或

>。 甜甜圈图表使用

来控制孔的大小。type 'pie''doughnut'参见Codepen示例（pie）cutoutPercentage

请参见Codepen示例（甜甜圈）

> Chart.js configuration（）：

属性允许广泛的自定义： options

标题：

>使用options>。

添加标题
• ：控制甜甜圈图的孔尺寸（0-50）。options: { title: { display: true, text: 'My Chart' } }
• >堆叠的条形图：使用cutoutPercentage用于堆叠的条形。
• 事件处理：options: { scales: { yAxes: [{ stacked: true }] } }
自定义传奇单击行为：

>>示例：动态字幕更新：

>

<🎜>

请参阅Codepen示例

此示例根据传奇单击更新标题。

Chart.js 2.0 vs. 1.0：> 密钥差异：

>图表声明： 2.0使用

，

和

的单个
调用。 1.0使用函数链接。
• > 移动支持：new Chart() 2.0包括本机移动支持。type> data options集成的标题： 2.0提供内置标题。
>
• 结论：
• Chart.js是快速图表原型制作的理想选择。其多样化的图表类型和易用性使其成为任何Web开发人员的宝贵工具。 有关全面的详细信息，请参阅官方图表。 （注意：替换
用每个图表类型的实际编码链路替换。）

以上是图表简介JS 2.0的详细内容。更多信息请关注PHP中文网其他相关文章！