如何使用 Chart.js 更改 Barchart 中仅一列的颜色

2024-01-04

js

http://www.chartjs.org/docs/#bar-chart http://www.chartjs.org/docs/#bar-chart

我正在使用基本示例:

HTML

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

JS

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(data, {
         responsive : true
    });
}

我想改变一列的颜色。我该怎么做?我尝试了很多教程,但没有找到解决方案。你能帮助我吗?


你可以像这样改变颜色。这里有一个jsfiddle http://jsfiddle.net/ow3n/r8uobu5u/

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx).Bar(data);

// change color of first bar
myChart.datasets[0].bars[0].fillColor = "rgba(255,0,0,1)";
myChart.update();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Chart.js 更改 Barchart 中仅一列的颜色 的相关文章

  • 如何从 JavaScript 中计算 HTML 表格的渲染高度?

    调整窗口大小时 我需要知道表格有多大 以便我可以动态地很好地适应中间的所有其他内容 表格高度仅取决于动态加载的内容 如何在 JavaScript 中计算表格的渲染高度 您可以使用element offsetHeight https deve
  • javascript 使用 onclick 创建按钮

    我正在尝试使用 javascript 创建一个具有 onclick 事件的按钮 该事件调用 head 中定义的函数 该函数接收相对于按钮的 dom 对象作为参数 我该怎么做呢 ex
  • AngularJS 使用 $apply 而不使用 $scope

    我开始使用 AngularJS 并且接受了用它来编写控制器的约定 而不是用 scope 所以我的控制器看起来像这样 myApp controller SomeController function this myModel id 1 nam
  • 在javascript中使用“return !0”有什么意义吗?

    如果您转到谷歌结果页面并运行rwt toString 你会看到这个函数的返回调用是 return 0 我想不出任何理由为什么这不会总是如此true 这只是一个简写吗true 还是还有更多事情发生 总是如此 但下载需要 2 个字节 0是 2
  • 如何根据按钮单击折叠和展开 Kendo UI 树视图中的所有树节点?

    这是行不通的 您可以使用此代码 1 崩溃 折叠kendoTree查看文档 http docs kendoui com api web treeview methods collapse treeview kendoTreeView var
  • 零作为 IIFE 中的第一个参数[重复]

    这个问题在这里已经有答案了 In babeljs v6 5 1 class Foo 编译为 use strict var classCallCheck2 require babel runtime helpers classCallChec
  • 在 asp.net vb 中通过第一个下拉列表值填充第二个下拉列表

    我在使用 asp net vb 时遇到了一些问题 我想做的是有2个下拉框 第一个下拉菜单将有 1 2 3 例如 第二个下拉菜单将有 A 乙 C 默认情况下 但是 如果选择 1 我希望第二个下拉菜单自动选择 c 我不知道 JavaScript
  • JavaScript 变量赋值与 OR 对比 if 检查[重复]

    这个问题在这里已经有答案了 在 JavaScript 中 我最近意识到你可以使用 OR 赋值的逻辑运算符 我想知道这是否被认为是不好的做法 特别是 我有一些具有可选数组输入的函数 如果输入是null or undefined我应该将它设置为
  • 在 Angular2 项目中集成 Treant-js

    我正在尝试在 Angular2 项目中使用 treant js 但我正在努力解决如何正确集成它的问题 我有一个工作正常的 JavaScript HTML 示例 我正在尝试在 Angular2 中工作 我创建了一个组件 从 npm 添加了 t
  • 光滑的轮播缓动示例

    我正在使用 Slick Carousel http kenwheeler github io slick http kenwheeler github io slick 但不知道如何合并不同的幻灯片切换 有人有例子可以分享吗 这是我目前拥有
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • 对象数组 - 在 Vue.js 生态系统中更新对象的正确方法

    我不确定问题到底出在哪里 但我会看看是否有人可以帮助我理解我的代码出了什么问题 我正在利用 Vuex 商店来跟踪某些不断变化的状态 我这样做如下 import Vue from vue import Vuex from vuex Vue u
  • 如何查看每秒更新的图表中的最后 10 个数据点?

    我有这个代码 private void timer Tick object sender EventArgs e timer Stop for int i 0 i lt TOTAL SENSORS i DateTime d DateTime
  • Window 与 Var 声明变量[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 中使用 var 和不使用 var 的区别 https stackoverflow com questions 1470488 difference between using v
  • Meteor.js 登录事件

    因此 我对 Meteor 框架和 JavaScript 总体来说还很陌生 但我正在使用该框架开发一个小项目 以尝试让自己达到标准 基本上我正在开发一个微博客网站 目前 用户可以通过多种服务登录 fb google 等 我通过插入所需 url
  • 使用Promise而不拒绝它会导致内存泄漏吗? [复制]

    这个问题在这里已经有答案了 代码如下 function test value return new Promise function fulfill reject try fulfill true catch e throw e 我担心的是
  • 为什么我需要 $(document.body) 来使用 Mootools Element 方法扩展 document.body?

    因此 在尝试让我的应用程序在最新的 IE 上运行后 结果发现 IE 不喜欢以下代码 document body getElement className Firefox 和 Chrome 响应良好 但是document bodyIE 上没有
  • Dojo/on 和捕获阶段

    有没有办法用 dojo on 在捕获阶段 而不是冒泡阶段 触发事件 我最终在这里寻找有关 on 的前身 dojo connect 的信息 就其价值而言 dojo connect 似乎不支持捕获阶段的事件侦听器 它的工作原理是将事件处理程序作
  • 错误:创建 React Native 项目版本 0.59.9 时找不到 template.config.js

    当我尝试创建 React Native 项目版本 0 59 9 时 出现以下错误 错误错误 无法在 react native 模板中找到 var folders zc h93bvpb573q24 5ynvgkn1wc0000gn T rnc
  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓

随机推荐

  • #include 运行 pip install zbar 时生成 1 个错误

    我正在尝试奔跑pip install zbar由于某种原因 我似乎无法找到解决此依赖性问题的答案 任何帮助将不胜感激 请参阅下面的回溯 Downloading unpacking zbar Downloading zbar 0 10 tar
  • UIWebView:如何在 HTML 文本字段中插入文本

    I ve an UIWeb视图加载移动网络表单 URL 的位置 在我的应用程序的方法中 我想将一些文本插入具有焦点的 UIWebView 中的 HTML 文本字段中 我怎样才能做到这一点 有没有办法获取具有焦点的 HTML 元素的 ID 然
  • Python:基于参数的单例

    我正在关注这个link https stackoverflow com a 6798042 820410并尝试创建一个单例类 但是 考虑参数 在启动类时传递 以便在参数相同时返回相同的对象 因此 不要将类名 类引用存储为dictkey 我想
  • UWP 应用程序安装无需管理员权限、powershell 交互且无需 Windows 应用商店?

    这里有 windows uwp 专家 吗 我已经研究下面提到的主题一天了 因为我不敢相信我们无法分发我们的 UWP 应用程序 是不是真的不可能通过以下方式分发 UWP 应用程序与商店不同的渠道无需手动运行 与powershell脚本交互 因
  • .htaccess:如何删除 URL 中的子文件夹子文件夹?

    我正在尝试重定向此网址www domain com username to www domain com username public但删除 public从网址 这是我的 htaccess file
  • 如何将 singledispatchmethod 与继承类一起使用

    在我的代码中 我有以下课程 class A functools singledispatchmethod def handle arg pass 我想要其他类继承A并重载泛型方法handle像这样 class B A handle regi
  • 使用 SWT 时的 Java SwingWorker

    我有一个问题如下 我编写了一个简单的简约应用程序 它使用 SWT 作为 GUI 在特定选项卡中 它显示一个通过 REST Api 调用填充信息的表格 另外 我还有另一种方法将此表导出到 CSV 文件中 这绝对没问题 现在我需要某种自动更新
  • Adobe After Effects 扩展脚本 - 如何从命令行运行脚本并传入参数?

    我正在尝试从命令行运行 Adob e AE 扩展脚本 我使用 r 参数 可以很好地运行脚本 但是 是否可以向脚本传递参数 就像 如果我从命令行运行这个 C gt C Program Files Adobe Adobe After Effec
  • NSMutableArray containsObject 返回 true,但它不应该

    我发现了类似的问题 但是 containsObject没有像我预期的那样工作 我的问题是NSMutableArray containsObject方法在不应该返回 true 时返回 true 当尝试生成随机唯一颜色并添加到数组时 检查是否存
  • 如何以编程方式将 Factor-bundle 与 browserify 一起使用?

    我想使用 Factor bundle 来查找 browserify 入口点的公共依赖项并将它们保存到单个公共包中 https www npmjs org package factor bundle https www npmjs org p
  • 如何使用 servlet 中的保存文件对话框?

    我试图让用户将 servlet 中的数据保存为 CSV 文件 最初我只是找到他们的桌面来放置文件 但此路线的权限会被拒绝 所以我想询问用户他们想要将文件保存在哪里 据我所知 我无法在 servlet 中使用 Swing API 因为 Tom
  • 点在函数中获取“脚本”

    我的 PowerShell 配置文件变得有点麻烦 我发现我并不总是使用其中的所有内容 我想减小我的个人资料的大小并加快启动时间 但我仍然希望能够访问这些功能相对地当我需要它们时很快 有没有办法 点源 https en wikipedia o
  • Cuda char* 变量赋值

    这是本文所选答案的后续问题 cuda程序的输出不是预期的 https stackoverflow com questions 6561005 output of cuda program is not what was expected 6
  • 清除 HTML 画布中形状下的像素

    我正在使用 HTML 画布和 javascript 并且需要清除通过关闭路径创建的形状下方的所有像素 例如 我正在使用flot http code google com p flot 并且我想制作圆角 为此 我首先需要通过在角的顶部绘制一条
  • Maven 创建一个空文件夹而不是获取适当的 .jar

    Maven 创建一个空文件夹而不是获取适当的 jar 我有一个由 3 个模块组成的项目 其中一个模块是其他两个模块的公共部分 当两个模块生成 WAR 文件时 第三个模块必须生成一个 JAR 该 JAR 应该嵌入到其他两个 WEB INF l
  • Magento CMS 错误:前端控制器达到 100 次路由器匹配迭代

    当我通过 CMS 在管理中 创建页面时 一切看起来都很好 但是当我尝试访问前端中的页面时 我得到一个带有错误的空白页面 Front controller reached 100 router match iterations 0 app c
  • NoSQL 的用例[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 NoSQL 最近在我们行业受到了广泛的关注 我真的很感兴趣人们对它在关系数据库存储上的最佳用例的看法 什么会促使开发人员认为特定数据集更适合 N
  • 在 Git 中的根提交之前插入非空提交?

    我有一个问题 请各位好心人指教 我有一个现有的 git 存储库 并且由于各种原因 我不会在这里讨论 我正在尝试创建一个 ROOT 提交 假设这是我的 git 提交历史记录 ROOT C1 lt C2 lt C3 lt C4 lt C5 lt
  • jQuery:如何制作一个清晰的按钮?

    我有一个搜索字段 我需要一个清晰的按钮 我目前有按钮 但我不知道该怎么做 我有 6 个文本字段 2 个组合框和 2 个多选列表 如何在一个清除函数中清除所有这些 我知道 HTML 方式 但我使用 Grails 并且 type reset 不
  • 如何使用 Chart.js 更改 Barchart 中仅一列的颜色

    js http www chartjs org docs bar chart http www chartjs org docs bar chart 我正在使用基本示例 HTML