如何在 Chart.js 中设置条形的默认颜色

2023-12-28

这看起来愚蠢地微不足道,但尽我所能,我似乎无法找到如何为 Chart.js 中的条形图设置默认颜色。

我的图表正在从 ajax 请求中获取数据,并且图表渲染得很好。然而既不更新Chart.defaults.global.defaultColor也不添加默认颜色将数据集作为选项有任何影响。

我非常感谢任何人在这里为我指明正确的方向。

$.ajax({
type: 'GET',
async: true,
url: "{{route('stats.monthlyData')}}",
dataType: 'json',
success: function (response) {
    var labels = [];
    var data = [];
    $.each(response, function () {
        labels.push(this.month_name);
        data.push(this.record_count);
    });
    drawChart('# of Records', labels, data);
}
});

function drawChart(label, labels, data){
    var ctx = document.getElementById("chart");
    //Chart.defaults.global.defaultColor = "#3498db"; Tried this but does not work
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: label,
                data: data,
                //defaultColor: ['#3498db'], Tried this but does not work
                backgroundColor: ['#3498db'], //Only the first bar gets set
                borderColor: [],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

}

Thanks.

UPDATE

如果它对任何人有帮助,问题是我正在设置背景颜色属性为只有一个条目的数组。如果您想为所有列默认它,那么它应该只设置为一个字符串。 感谢 @mp77 让我注意到这个问题。


你需要使用fillColor您的财产datasets像这样的数组 - (而不是borderColor, try strokeColor像下面这样)

datasets: [{
    label: label,
    data: data,
    fillColor: "rgba(14,72,100,1)", // v2+ uses background color
    strokeColor: "brown",
    borderWidth: 1
}]

完整的工作示例可以从 Chartjs 的演示之一中看到here http://codepen.io/SitePoint/pen/Kpager

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Chart.js 中设置条形的默认颜色 的相关文章

  • 无法在地图循环中访问 Axios 调用的值

    我有一个 javascript 对象 其 ID 对应于一组画廊 我使用地图循环遍历它 在每个循环中 我都会进行 axios 调用来获取当前 id 的图库 最后 我需要一个包含所有画廊内容的数组 问题是地图循环完成后我无法访问数据 当我 co
  • 有没有办法在javascript中代理(拦截)一个类的所有方法?

    我希望能够在类本身的构造函数内代理类的所有方法 class Boy constructor proxy logic do something before each call of all methods inside class like
  • Brunch 源映射:在 Chrome 开发工具中未命中断点

    我正在使用 Brunch 中内置的默认源映射 我看到文件很好 但无法在源映射文件中命中断点 使用 Javascript 访问调试器debugger 有效 这让我相信早午餐方面出了问题 这是我的 brunch config js module
  • JavaScript 画布内存问题

    我在用着getImageData putImageData在 HTML5 画布上能够操作图片 我的问题是浏览器似乎从来没有释放任何内存 http jonelf posterous com lite gc men for sent 直到我关闭
  • 如何动态删除嵌套的json键?

    这是示例 json search facets author language value nep count 3 value urd count 1 source value West Bengal State Council of Vo
  • 使用javascript滚动滚动条或鼠标滚轮后触发事件

    我想知道是否可以触发事件after使用滚动条或鼠标滚轮 或在触摸设备上滑动 时滚动页面 基本上 我想检测用户何时停止滚动 以便我可以进行 AJAX 加载 而不是在滚动时加载 看起来jQuery s scroll 每次用户滚动时都会触发 并且
  • 如何正确地将节点从引用传递到上下文?

    我正在尝试将节点从引用传递到上下文 但是因为我在第一次渲染后没有重新渲染 所以传递的节 点是null 我考虑了两种变体 但我认为它们不是最好的 To pass ref代替ref current 但在用例中 我将被迫使用类似的东西contex
  • 鼠标移动时画布拖动

    我正在尝试构建一个可以使用鼠标移动拖动的画布 我做了一些我无法理解的错误 因为一开始似乎有效 然后出现了一个增量错误 使画布移动得太快 考虑以下代码 window onload function var canvas document ge
  • 仅从功能区打开一个对话框

    我有一个带有登录按钮的功能区 可打开登录对话框 我想将对话框的数量限制为一个 我正在使用函数 displayDialogAsync startAddress options callback https learn microsoft co
  • 替换img路径jquery

    我正在尝试替换 jquery 中的 img 路径 注入远程页面 replaceexample com thumbs withexample com images 我已经尝试过这个 但似乎不起作用 img attr src replace t
  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph
  • 如何将焦点设置在 BootStrap 中的第一个输入字段上? [复制]

    这个问题在这里已经有答案了 可能的重复 如何将焦点设置到独立于 id 的 HTML 表单中的第一个输入元素 https stackoverflow com questions 277544 how to set the focus to t
  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕
  • 即使我的情况按预期发生变化,Angular ngClass 也不会更新我的课程

    我正在创建的模板中有类似的内容 div class nng 3 div 价值app layout isNavbarFixed等用零或一初始化 并且页面第一次加载时 适当的类被插入到我的div 不过 此后通
  • JavaScript setTimeout 和更改系统时间会导致问题

    我注意到如果我设置setTimeout未来1分钟 然后将我的系统时间更改为过去5分钟 setTimeout功能将在 6 分钟后触发 我这样做是因为我想看看夏令时系统时钟更改期间会发生什么 我的 JavaScript 网页使用setTimeo
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • 如何捕获文本区域上的 Enter 按键而不是 Shift+Enter? [复制]

    这个问题在这里已经有答案了 I m doing it for texarea A function should be called when the user press Enter but nothing should be done
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • 获取类中的所有静态 getter

    假设我有这个类 我像枚举一样使用它 class Color static get Red return 0 static get Black return 1 有没有类似的东西Object keys to get Red Black 我使用
  • 如何强制下载图片?

    我的页面上有一个动态生成的图像 如下所示 img src 我不想告诉我的用户右键单击图像并点击保存 而是想公开一个下载链接 单击该链接将提示下载图像 如何实现这一目标 最初我在 js 中尝试这样做 var path my image att

随机推荐

  • PyCharm 调试分段错误(信号 11)

    在PyCharm 社区版2016 2 3 中 使用anaconda2 ubuntu 14 04 import matplotlib在调试模式期间导致信号 11 错误 在release模式下执行脚本没有问题 蟒蛇代码 import matpl
  • Valgrind/R 无法工作:“致命错误:无法创建 'R_TempDir'”

    首先 我对这些东西不太熟练 所以我可能会写一些愚蠢的问题 请友善 我有一个调用 C 代码的 R 代码 不幸的是 我的代码有问题 可能是内存未映射 我想使用 valgrind 尝试了解错误所在 几年前我已经使用过它 但现在似乎不起作用 当我午
  • 当 Reveal.js 幻灯片激活时如何触发 GSAP 功能?

    我想在演示文稿中添加一些简单的动画 我使用 GSAP TweenMax 来完成这项工作 我对动画设置没有问题 但是这些动画在演示开始后立即触发 我如何控制它 以便只有当带动画的幻灯片处于活动状态时脚本才会执行 欢迎您提供所有帮助 问候 ED
  • Android 中的 PATCH 动词(OkHttp、Volley、Retrofit...)

    我知道类似的问题已经被问过几次了 但我似乎找不到一个简单问题的解决方案 PATCH verb 因此 我询问任何使用 OkHttp Volley 或 Retrofit 解决 Android 中的 PATCH 问题的人 或者如果您使用不同的方法
  • Localstack 与 MassTransit 未收到消息

    我在使用 LocalStack 测试 MassTransit 时遇到问题 但在 AWS 中使用真正的 SNS SQS 一切正常 因此我怀疑这是 LocalStack 的问题 除非 MassTransit 需要配置 ServiceURL 以外
  • 您可以将 SIP 电话与 Twilio Endpoint 连接吗?如果是这样,怎么办?

    我有一个基于 Linksys Cisco SPA942 电话的 SIP 电话系统 我想将现有的 PBX 排除在外 并使用 Twilio 为我们编写一个自定义 PBX 我熟悉 Twilio 并且过去编写过许多应用程序 但 Twilio 的 S
  • DRF - 发布到 ManyToMany 字段

    在我的 Django 应用程序中 模型 py class Destination models Model name models CharField max length 30 class Ride models Model driver
  • Scala 中的数据压缩

    下面是我尝试实现一个提供压缩 解压缩字符串功能的类 object GZipHelper def deflate txt String Try String try val arrOutputStream new ByteArrayOutpu
  • 如何在ag-grid中获取过滤行?

    我有一个ag Grid https www ag grid com 带过滤选项 如何在ag Grid中获取过滤后的行 而不是选定的行 您可以使用 forEachNodeAfterFilter callback api 方法来实现此目的 Se
  • 垂直打印字符串 - Python3.2

    我正在编写一个脚本 它将作为用户输入的字符串 并垂直打印它 如下所示 input John walked to the store output J w t t s o a o h t h l e o n k r e e d 我已经写了大部
  • 让两条对角线都通过矩阵项 (i,j) 的 Pythonic 方法

    获取矩阵中通过条目的对角线元素列表的Pythonic方法是什么 i j 例如 给定一个矩阵 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 和一个条目 比如
  • 在 Angular 7 中导航而不向 URL 添加参数

    我想在 Angular 7 中的两条路线之间导航 并在它们之间发布数据 但我不想在 URL 中显示这些参数 如何以正确的方式去做 此刻我正在努力解决这样的问题 this router navigate my new route data1
  • 多对多关系。在 def __str__ 方法中返回字段

    我有两个模型 AffectedSegment model class AffectedSegment models Model SEGMENTO ESCAPULA Esc pula SEGMENTO HOMBRO Hombro SEGMEN
  • wait 语句必须包含带有 UNTIL 关键字的条件子句

    以下VHDL将用于测试平台 在分析过程中 我在第一个等待语句上不断收到错误 等待语句必须包含带有 UNTIL 关键字的条件子句 我有几个这样编写的工作测试台 我似乎无法找到可能是什么错误 library IEEE USE IEEE std
  • 如何使用 ggplot 创建多面折线图?

    我有一个用以下代码创建的数据框 require reshape2 foo lt data frame abs cbind rnorm 3 rnorm 3 mean 8 rnorm 3 mean 9 rnorm 3 mean 1 qux lt
  • Power BI Desktop 的一个切片器影响多个表

    我正在 Power BI Desktop 中的单个页面上设置多个表 并计划发布到应用程序 我使用 SQL Server 作为数据源来提取三个不同的预先建立的系统视图的输出 每个视图都从同一组原始数据库表中提取 但呈现不同的订单分组 例如 一
  • 在大图像中使用 findCirclesGrid()

    我在 Python 2 7 中使用 OpenCV 3 来校准不同的相机 我使用 findCirclesGrid 函数 它成功找到了4 x 11 圆形图案 http robocraft ru files opencv acircles pat
  • 在没有 Intent 过滤器的另一个包中启动服务

    有没有办法在不使用清单文件中的 Intent Filter 标签的情况下启动另一个包中定义的 Android 服务 由于某种原因 我无法更新包含该服务的应用程序的清单文件 如果您知道确切的包名称和服务名称 您可以用它创建一个 Intent
  • 如何使用 headless: true 使用 puppeteer 下载文件?

    我一直在运行以下代码来下载csv来自网站的文件http niftyindices com resources holiday calendar const puppeteer require puppeteer async gt const
  • 如何在 Chart.js 中设置条形的默认颜色

    这看起来愚蠢地微不足道 但尽我所能 我似乎无法找到如何为 Chart js 中的条形图设置默认颜色 我的图表正在从 ajax 请求中获取数据 并且图表渲染得很好 然而既不更新Chart defaults global defaultColo