js点击按钮改变字体大小并给他颜色_使用Chart.js库精美地可视化数据

最新推荐文章于 2021-07-28 16:58:22 发布
最新推荐文章于 2021-07-28 16:58:22 发布
阅读量445 收藏
点赞数
文章标签： js点击按钮改变字体大小并给他颜色 js获取a标签的value值 禁止查看js文件

709a9d3d5936f80a96167af17e728fdc.png

创建看起来很漂亮的图表可能会有点痛苦。大多数情况下，网页设计师或开发人员使用图形来使用Photoshop或Illustrator显示数据，这可能需要很长时间才能完成。

使用Chart.js可视化数据 - 教程

Chart.js库是一个伟大的在线JavaScript库，它使用HTML5 canvas元素来绘制图形和图表，并附带文档。

要查看Chart.js的实际运行情况，我们将使用Web编程语言构建以下图表作为我们的标签及其虚构数据：

  • 折线图
  • 条形图
  • 雷达图
  • 极地图
  • 饼形图
  • 甜甜圈图

完成本教程所需的资源：

  • Chart.js图书馆
  • 时间和耐心

查看演示

入门

首先，我们需要将解压缩文件夹中的chart.min.js复制到我们的js文件夹或首选目录中。

d61bd4518f0bc625bd0dd6fbd528c22a.png

配置

接下来我们需要做的是创建一个新的HTML文件并添加以下代码。这将包括HTML5 doctype，然后是CSS文件目录，后跟Chart.js库文件目录。

<!DOCTYPE html>

绘制折线图

要绘制折线图，我们需要首先在HTML文件的body部分创建一个HTML5 canvas元素。

<canvas id="canvas" height="450" width="600"></canvas>

接下来，我们需要创建一个初始化图表类的脚本（在本例中，我使用了myLineChart），然后检索我们想要绘制图表的画布的2D上下文。在结束正文标记之前复制代码。

var myLineChart = new Chart(document.getElementById("canvas").getContext("2d")).Line(LineChart, {scaleFontSize : 13, scaleFontColor : "#ffa45e"});

注意：您还可以使用“图表”选项在每个图表上添加所需的某些样式，例如文本颜色和字体大小。

在上面的示例中，我使用scaleFontSize和scaleFontColor来更改数据的字体大小和文本颜色。您可以查看Chart.js文档以查看每个图表的更多可用图表选项。

对于我们的数据结构，我们将初始化一个对象（对于此示例，我使用的是LineChart），该对象包含折线图的所有标签。折线图的数据将分解为一组数据集。您应该定义每个数据集的值，例如填充颜色，笔触颜色，点颜色，点笔划颜色和数据本身。

var LineChart = {
    labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
    datasets: [{
        fillColor: "rgba(151,249,190,0.5)",
        strokeColor: "rgba(255,255,255,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        data: [10, 20, 30, 40, 50]
    }, {
        fillColor: "rgba(252,147,65,0.5)",
        strokeColor: "rgba(255,255,255,1)",
        pointColor: "rgba(173,173,173,1)",
        pointStrokeColor: "#fff",
        data: [28, 68, 40, 19, 96]
    }]
}

您将得到类似的结果，如下图所示：

3090c9188180350507d69f1f3560f45b.png

绘制条形图

要绘制条形图，我们需要首先在HTML文件的body部分创建一个HTML5 canvas元素。

<canvas id =“canvas”height =“450”width =“600”> </ canvas>

接下来，我们将创建一个代表条形图类的脚本（在本例中，我使用了myBarChart），然后检索画布的2D上下文。在结束正文标记之前复制代码。

var myBarChart = new Chart（document.getElementById（“canvas”）。getContext（“2d”））。Bar（BarChart，{scaleFontSize：13，scaleFontColor：“＃ffa45e”}）;

条形图与折线图的数据结构几乎相同。让我们使用一个对象（对于这个例子，我使用BarChart）来保持条形图的标签和值。如您所见，我们显示的数据与上一个折线图示例相同。

var BarChart = {
    labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
    datasets: [{
        fillColor: "rgba(151,249,190,0.5)",
        strokeColor: "rgba(255,255,255,1)",
        data: [13, 20, 30, 40, 50]
    }, {
        fillColor: "rgba(252,147,65,0.5)",
        strokeColor: "rgba(255,255,255,1)",
        data: [28, 68, 40, 19, 96]
    }]
}

您将得到类似的结果，如下图所示：

72954a9faafc102e6e12d213be63aeb9.png

绘制雷达图

接下来，让我们绘制雷达图。所以，首先在我们的HTML文件上放置HTML5 canvas元素代码。

<canvas id =“canvas”height =“450”width =“610”> </ canvas>

然后，我们将创建一个初始化雷达图表类的脚本（在本例中，我使用了myRadarChart），然后检索画布的2D上下文。将代码放在结束体标记之前。

var myRadarChart = new Chart（document.getElementById（“canvas”）。getContext（“2d”））。Radar（RadarChart，{pointLabelFontSize：13，pointLabelFontColor：“＃ffa45e”}）;

对于雷达图，我们需要为图表的每个点显示一个标签。这将包括一个字符串数组，然后在图表周围显示它。为此，让我们再次实例化一个对象（对于这个例子，我使用RadarChart）作为雷达图的标签和值的容器。

var RadarChart = {
    labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],
    datasets: [{
        fillColor: "rgba(151,249,190,0.5)",
        strokeColor: "rgba(255,255,255,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        data: [10, 20, 30, 40, 50]
    }, {
        fillColor: "rgba(252,147,65,0.5)",
        strokeColor: "rgba(255,255,255,1)",
        pointColor: "rgba(173,173,173,1)",
        pointStrokeColor: "#fff",
        data: [28, 48, 40, 19, 96]
    }]
}

您将得到类似的结果，如下图所示：

3f9b33137d703df0d247717d6f438c94.png

绘制极地面积图

要绘制Polar Area图表，我们需要在HTML文件中使用HTML5 canvas元素代码。

<canvas id =“canvas”height =“400”width =“610”> </ canvas>

接下来，让我们为对象创建一个脚本（在本例中，我使用了myPolarAreaChart），然后检索画布的2D上下文。您可以在结束正文标记之前复制下面的代码。

var myPolarAreaChart = new Chart（document.getElementById（“canvas”）。getContext（“2d”））。PolarArea（PolarChart，{scaleFontSize：13，scaleFontColor：“＃ffa45e”}）;

极区图与饼图几乎相同; 但是，每个段具有相同的角度，并且半径根据值而不同。

让我们首先实例化对象（例如，我使用PolarChart）来保存标签和值，从而创建Polar区域图的数据结构。value属性应该是数字，而color属性应该是字符串。

var PolarChart = [{
    value: Math.random(),
    color: "#fac59c"
}, {
    value: Math.random(),
    color: "#c9fadd"
}, {
    value: Math.random(),
    color: "#a2efff"
}, {
    value: Math.random(),
    color: "#e6d1ff"
}, {
    value: Math.random(),
    color: "#ffd1f9"
}, {
    value: Math.random(),
    color: "#ffd1d1"
}];

您将得到类似的结果，如下图所示：

cb8100c840a867ad3a779c7d575113bc.png

绘制饼图

接下来，让我们绘制一个饼图。首先，我们需要HTML5 canvas元素。

<canvas id =“canvas”height =“450”width =“610”> </ canvas>

然后，让我们创建我们的对象（在这个例子中，我使用myPieChart），然后检索画布的2D上下文。在关闭正文标记之前复制下面的代码。

var myPieChart = new Chart（document.getElementById（“canvas”）。getContext（“2d”））。Pie（PieChart）;

对于饼图，我们需要传入一个具有值（即数字）和颜色属性的对象数组。所以，让我们这样做。复制下面的代码。

var PieChart = [{
    value: 40,
    color: "#fcc79e"
}, {
    value: 30,
    color: "#beefd2"
}, {
    value: 90,
    color: "#ffddfb"
}];

您将得到类似的结果，如下图所示：

300bb02679f13f5d1c37a5eb54acb0ff.png

绘制圆环图

最后，我们将绘制一个圆环图。我们需要首先在HTML文件的body部分创建一个HTML5 canvas元素。

<canvas id =“canvas”height =“450”width =“610”> </ canvas>

接下来，我们需要获取画布的上下文并实例化图表。

var myDoughnutChart = new Chart（document.getElementById（“canvas”）。getContext（“2d”））。Donut（DoughnutChart）;

最后，让我们创建数据。对于圆环图，就像饼图一样，我们需要传递一个具有值和颜色属性的对象数组。

var DoughnutChart = [{
    value: 60,
    color: "#fcc79e"
}, {
    value: 30,
    color: "#beefd2"
}, {
    value: 50,
    color: "#ffddfb"
}, {
    value: 120,
    color: "#cdecff"
}, {
    value: 90,
    color: "#fff5bc"
}];

您将得到类似的结果，如下图所示：

f27626dfbeda95a42c2d6ebf2a875568.png

最后的话

Chart.js是一个很棒的JavaScript库，可以用你创造性的方式创建图表。本教程介绍了如何使用这个很酷的库的步骤。但是，使用Chart.js有一些缺点，例如，它没有工具提示，也没有交互性。

据说这个JavaScript库还有很长的路要走，最终会被不同的开发人员改进。

玩它并让我知道如果你有一个演示，你使用图表选项想出一个很酷的设计。

weixin_39966163
关注
Python数据可视化Pyecharts的全局配置
Mr数据杨
06-13 3万+
大家好，我是Mr数据杨。想象一下，《三国演义》中的诸葛亮坐在帐篷中，一张草地前，推演天下大势。在Python的世界中，这张草地就好比一张图表，诸葛亮的一笔一画就是各种配置项。如同诸葛亮的起步，我们需要使用InitOpts来初始化图表。一旦成功，图表将展现在眼前。诸葛亮的笔触下，图表跃然生动，犹如使用了AnimationOpts赋予图表动态的生命力。在诸葛亮的眼中，每个城市、每个战场都有其特性。
web端数据可视化JavaScript脚本-D3.js
01-11
D3.js是一个用于网页作图、生成互动图形的JavaScript函数库。它提供一个d3对象，所有方法都通过这个对象调用
使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用Chart.js的可视化
weixin_33893473的博客
09-09 617
向一些人介绍一些信息的最好方法是使用图表。ASP.NET有图表控件，但它并不是性能最好的控件。Chart.js是个很好的理想。使用“守则”Download Chart.js你可以Chart.js从这封信中：https://github.com/chartjs/Chart.js/releases使用VisualStudio创建新的ASP.NET项目并复制Chart.js在上一步...
js点击按钮改变字体大小并给他颜色_按钮如何设计更能吸引人
weixin_39902184的博客
11-20 1659
按钮的不同分类如下：* 动作按钮* 常用按钮样式* 按钮的颜色和形状* 按钮状态和反馈* 标签按钮* 触摸屏按钮* 按钮的位置* 系统按钮* 总结动作按钮 我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。1_1.行为召唤（CTA / C2A）在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事...
Chart.js 與 ASP.NET MVC 整合應用
weixin_30316097的博客
01-01 284
Chart.js 是一套開放原始碼的「圖表」繪製函式庫，和其他第三方的圖表工具相比，Chart.js 的特色如下： 支援 HTML 5、響應式網頁 (RWD, Responsive Web Design) 可免費使用，且可作為商業用途 開放原始碼 (GitHub) 可用 JavaScript 操作及開發 可與 JSON 格式整合，因此能與 ASP.NET MVC、ASP.NET We...
js实现选中按钮文字变颜色
HouRuoTong的博客
03-12 3126
在html里面 <div id="btn1"> <button id="caseLeftbtn" class="caseLeftbtn" onclick="btn1(1)">ASFV</button> <button id="caseRightbtn" class="caseRightbtn" onclick="btn1(2)">AIV</button> </div> 添加点击事件 function btn1(ke
数据可视化入门：Excel实用技巧分享
本章将介绍数据可视化的基本概念，讨论其优势以及应用场景，并重点探讨数据可视化在决策分析中的作用。 ## 1.1 数据可视化简介 数据可视化是指通过图形化展示数据信息，使得数据更加直观化和易于理解的过程。通过...
Excel图表高级技巧与数据可视化
数据可视化是通过图表、图形和其他可视化手段将数据以可视化的方式呈现出来，以便更好地理解和分析数据。数据可视化可以将复杂的数据转化成易于理解和交流的形式，帮助人们发现数据背后的模式、趋势和关系。 ## 1.2...
Bootstrap精美自适应后台管理网站源码.zip
10-05
6. **第三方库集成**：为了增强功能，可能还集成了其他JavaScript库，如jQuery、Chart.js（用于数据可视化）、Font Awesome（图标库）等。 7. **响应式设计**：源码中的每个组件和布局都是为移动设备优化的，能够...
LabVIEW中的数据可视化与报表生成
LabVIEW通过连接虚拟仪器和现实世界的硬件设备，使工程师和科学家能够轻松地进行数据采集、分析和处理。 ## 1.2 LabVIEW的特点与应用领域 - LabVIEW具有直观的图形化编程界面，减少了代码编写的复杂度，适合不擅长...
在ASP.NET中使用Chart.js的可视数据
04-05
使用Chart.js在ASP.NET Web表单上可视化来自MS SQL Server数据库的数据
ASP+FSO可视化目录编历（可增、删、改）下载
01-20
本程序介绍： 1、完全可视化界面操作，采用asp+fso开发。 2、可上传文件，可修改删除文件。 3、同时提了其他俩个程序（大家可自行测试）。本地下载 您可能感兴趣的文章:asp fso操作类asp结合fso实现文件或文件夹创建删除等操作的函数asp下利用fso实现文件夹或文件移动改名等操作函数使用FSO修改文件夹的名称实现文件转移防盗链fso asp生成静态html的代码asp下用ADODB.Stream代替FSO读取文本文件设置FSO权限功能的说明ASP FSO文件操作函数代码（复制文件、重命名文件、删除文件、替换字符串）
asp.net chart控件的使用
01-30
asp chart控件的简单使用说明例子 asp chart控件的简单使用说明例子
chart.js 统计图
11-08
chart.js 统计图 柱状图、环形图、曲线图、饼图、极地区域图、雷达图或蛛网图
ASPP的pytorch实现
weixin_38241876的博客
11-23 7228
from torch import nn import torch import torch.nn.functional as F class ASPPConv(nn.Sequential): def __init__(self, in_channels, out_channels, dilation): modules = [ nn.Conv2d(in_channels, out_channels, 3, padding=dilation, d...
js点击按钮改变字体大小并给他颜色_按钮设计-UI组件系列
weixin_39616565的博客
11-20 660
​为什么按钮无处不在？为了设计正确的交互，我们需要回顾物理按钮的历史和起源，它是如今所有数字产品中大量使用的UI组件的直接前身。按钮是惊人的。手指触摸正在运行的设备、汽车或系统，即使用户不理解底层的机制或算法。在《Power Button》一书中，雷切尔•普罗尼克追溯了当今按键文化的起源，并描述了按键如何成为数字指令的一种方式，这种方式承诺了轻松、谨慎和万无一失的控制。“你按下按钮，我们来做其余的...
asp.net 可视化操作（一）——asp.net安装与使用
专注于C/C++/Linux领域创作
12-16 2217
目录 安装 创建网页 设计网页 运行 vs 2019安装asp.net 1、安装 打开vs，选择继续但无需代码 -->工具–>获取工具和功能 勾选如下选项后，点击关闭 点击更新等待安装完成…… 使用 创建asp.net网页 打开vs，按下图创建asp.net程序 填写项目名称，这里我们先使用默认的项目名 选择Web窗体，确定 右键单击创建的项目 选择添加–&g...
js点击按钮改变字体大小并给他颜色_如何在Elementor中修改文本的字体、大小、颜色、样式...
weixin_39638801的博客
10-24 748
本文将介绍Elementor网页编辑器中如何修改文本的字体、大小、颜色和样式。 原文首发于：https://loyseo.com/how-to-change-font-size-color-family-style-in-elementor-page-builder/ 许多Elementor元素都提供了编辑文本的字体、大小、颜色和样式的功能。这些设计选项位于元素的“ 样式”/style选项卡中。...
如何在ASP.NET网络应用实现数据可视化图表
RoffeyYang的博客
07-28 1841
TeeChart for .NET是优秀的 4.0 WinForm 图表控件，官方独家授权汉化，集功能全面、性能稳定版、优惠等优势。NET 的 TeeChart for .NET 中文承诺让您在使用和学习上没有语言障碍，最少可以节省 30% 的开发时间。 点击立即下载最新版TeeChart for .NET WebForms TeeChart通过WebChart TeeChart控件为WebForms集成。WebChart可以在标准TeeChart的工具箱中找到。网络安装。 工具箱中的WebChart图标
使用JavaScript库（如D3.js、Chart.js）在Web应用程序中创建可视化图表，并将其嵌入到HTML页面中。
最新发布
03-30
以下是使用D3.js创建可视化图表并将其嵌入到HTML页面的步骤： 1. 在HTML页面中引入D3.js库： ```html <script src="https://d3js.org/d3.v6.min.js"> ``` 2. 创建一个容器元素，用于放置图表： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值