首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >ChartJS如何仅将颜色设置为一个条形图

ChartJS如何仅将颜色设置为一个条形图
EN

Stack Overflow用户
提问于 2021-03-28 17:50:33
回答 1查看 24关注 0票数 0

我有这个barChart,我很难通过脚本将颜色设置到索引的一条线上。下面是我的图表条形码:

代码语言:javascript
运行
AI代码解释
复制
    var ctx = document.getElementById("myBarChart");
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: "Valor",
            backgroundColor: "rgba(2,117,216,1)",
            borderColor: "rgba(2,117,216,1)",
            data: [],
        }],
    },
    options: {
        plugins: {
            datalabels: {
                anchor: 'end',
                align: 'top',
                formatter: function (value, context) {
                    if (value != 0) {
                        return new Date(value * 1000).toISOString().substr(11, 8);
                    } else {
                        value = " "
                        return value;
                    }
                },
                font: {
                    weight: 'bold'
                }
            }
        },
        responsive: true,
        tooltips: {
            /*  intersect: false, */
            callbacks: {
                title: function (tooltipItem, data) {
                    return data['labels'][tooltipItem[0]['index']];
                },
                label: function (tooltipItem, data) {
                    return new Date(parseInt(data['datasets'][0]['data'][tooltipItem[
                        'index']]) * 1000).toISOString().substr(11,
                        8);
                },
            },
        },
        scales: {
            xAxes: [{
                time: {
                    unit: 'month'
                },
                gridLines: {
                    display: false
                },
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    suggestedMax: 36000,
                    stepSize: 3600,
                    beginAtZero: true,
                },
            }],
        },
    }
});

我已经尝试过了: myBarChart.data.datasets.backgroundColor

但是它不起作用。如果有人知道如何在最新版本的chartjs中做到这一点,请帮助我。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-28 18:13:11

可以向backgroundColor属性提供数组。在此数组中,您可以使用默认颜色填充它,除了您希望条形图是不同颜色的索引之外

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66844419

复制
相关文章
idea设置背景颜色为黑色(eclipse背景颜色设置黑色)
黑夜给了我黑色的眼睛我却用它来寻找光明。既然是黑色的眼睛那就设置一波黑色背景吧。在黑色额背景中寻找光明。
全栈程序员站长
2022/07/28
3.8K0
idea设置背景颜色为黑色(eclipse背景颜色设置黑色)
pycharm如何修改背景颜色_如何设置幻灯片背景颜色为自定义
Pycharm可以通过设置主题来设定背景颜色,但主题的背景颜色也仅仅局限特定的几种,通过如下的方式可以自定义背景颜色。
全栈程序员站长
2022/09/25
1.6K0
pycharm如何修改背景颜色_如何设置幻灯片背景颜色为自定义
如何将Eclipse设置为中文版[通俗易懂]
我们知道Eclipse一个开放源代码的、基于Java的可扩展开发平台,不管学习还是工作都是一款不错的集成开发环境(IDE),但是对于一些初学者看到Eclipse上满满的英文字母可能会感到无从下手,汉化后可能还好点。
全栈程序员站长
2022/08/20
4.2K0
如何将Eclipse设置为中文版[通俗易懂]
如何将EasyCVR通道设置为默认在线?
EasyCVR平台具有强大的数据接入、处理及分发能力,可支持海量视频的轻量化接入与汇聚管理。平台可支持多协议、多类型设备接入,包括:国标GB28181、RTMP、RTSP/Onvif、海康Ehome、海康SDK、大华SDK、宇视SDK等。
TSINGSEE青犀视频
2023/05/19
1.2K0
pycharm背景设置为黑色_pycharm设置护眼背景颜色
pycharm更改整体背景颜色(黑-白) 打开pycharm: 1、左上角File —- Settings
全栈程序员站长
2022/09/25
1.7K0
pycharm背景设置为黑色_pycharm设置护眼背景颜色
eclipse如何设置背景颜色[通俗易懂]
特别是对于我们这样长期在电脑工作的人来说是很伤眼的,那么如何请背景颜色换掉呢。其实只需要简单几步就能完成。
全栈程序员站长
2022/09/06
2.8K0
eclipse如何设置背景颜色[通俗易懂]
如何将MySQL GR 设置为多主模式
在MySQL 5.7.17版本中发布的MySQL Group Replication(后文简称为MGR)被很多人称为MySQL复制方案的正规军,可以一举取代现在的MySQL Replication,Semisynchronous replication,甚至是可以取代之前最成功的MySQL集群方案Galera。 MGR有两种模式,一种是Single-Primary,一种是Multi-Primary,单主或者多主。 在前一种模式Single-Primary中,无论集群中有多少个节点,只有一个节点允许写入,其它
数据和云
2018/03/07
4K0
如何将MySQL GR 设置为多主模式
(四) 如何将socket设置为非阻塞模式
1. windows平台上无论利用socket()函数还是WSASocket()函数创建的socket都是阻塞模式的: SOCKET WSAAPI socket( _In_ int af, _In_ int type, _In_ int protocol ); SOCKET WSASocket( _In_ int af, _In_ int type, _In_ int
范蠡
2018/04/04
4.7K0
如何将U盘设置为启动盘
1.首先我们将封装好系统的启动u盘插入USB口中,启动电脑.。 2.当显示屏闪过第一个开机画面的时候,我们迅速连续按下键盘上的快捷启动热键,联想为F12,其他品牌按下表自行查询快捷启动热键或联系电脑品牌客服询问。
雾海梦曦
2022/11/12
3.8K0
如何将U盘设置为启动盘
将 Vim 设置为 Rust IDE
Rust 语言旨在以 C++ 开发人员熟悉的方式实现具有安全并发性和高内存性能的系统编程。它也是 Stack Overflow 的 2019 年开发人员调查中最受欢迎的编程语言之一。
用户8639654
2021/09/15
1.9K0
Tensorflow将模型导出为一个文件及接口设置
在上一篇文章中《Tensorflow加载预训练模型和保存模型》,我们学习到如何使用预训练的模型。但注意到,在上一篇文章中使用预训练模型,必须至少的要4个文件:
superhua
2018/08/28
1.8K0
设置pycharm背景颜色_python设置背景颜色
1、选择不同的主题、选择背景图片            Appearnce & Behavior  –>  Appearance
全栈程序员站长
2022/09/27
3.9K0
go: kafka 将group设置为最新
有时,在确保group当前没有consumer的情况下,可以将这个group的偏移设置成最新,以保证下次启动时,group能从最新的消息消费。 代码:
超级大猪
2019/11/21
2.2K0
[工具]如何判断一个颜色是什么颜色?
这个颜色如何拿来为自己的PPT/Power BI报告所用?词汇毕竟匮乏,要知道“红色”就不止几十种。今天介绍的ColorPix这款取色器或许可以帮上你的忙。
wujunmin
2021/09/07
9920
[工具]如何判断一个颜色是什么颜色?
如何将页面设置为微信端才能打开
  我们有时候开发一个新项目比较辛苦,不想让别人轻易就能反编译代码,我们可以加一个授权登录,如果不是在微信端登录就会提示“请在微信客户端打开链接”,如下图所示,这就是很多网友说的微信链接无法在pc端打
ytkah
2018/03/06
2K0
如何将页面设置为微信端才能打开
pycharm设置字体颜色_pycharm界面颜色设置
File–>Settings–>Editor–> Color Scheme–>Language Defaults–>Comments–>Line comment–>再选取自己想要的颜色即可
全栈程序员站长
2022/09/27
3K0
pycharm设置字体颜色_pycharm界面颜色设置
如何设置pycharm字体大小_pycharm设置字体颜色
pycharm 是很好的一个IDE,在windows下,和macOS下,都能很好的运行。唯一缺点是启动慢。
全栈程序员站长
2022/09/27
4.1K0
如何设置pycharm字体大小_pycharm设置字体颜色
如何将微信地区设置为:日本 我孙子市
先说一个有意思的:微信地区有个很特别的现象,很多地区都是“安道尔”,可以做一个有趣的计算,根据自己好友中安道尔人数占总好友的比例,去乘以使用微信软件总用户的数量,可以得出微信上来自“安道尔”的用户大概有2250万人。
许坏
2020/03/12
3.3K0
怎样将Anaconda设置为国内的镜像
“ Anaconda是世界上最流行的数据分析平台(它们官网自己吹的nb),如果把镜像改为国内的可以节省很多时间。”
讲编程的高老师
2020/08/14
7.5K1
echarts如何设置背景图的颜色
公司的业务涉及到统计图的有很多,最近一直echarts里面踩各种坑,感觉应该建立一个echarts专题才对,前端的东西博大精深,无论在哪一个知识点,只要细细深究,都是别有一方天地在等待,随着需求的不同,代码改动的也自然会很多,静下心来,总结好,下次在遇到就会变的得心应手无所不能了。
王小婷
2018/08/02
4.3K0
echarts如何设置背景图的颜色

相似问题

如何使用chartjs设置条形图中每个条形图的颜色?

39

条形图中每个条形图的不同颜色;ChartJS

2015

chartjs堆栈条形图颜色不起作用

26

ChartJS中的条形图颜色未更新

111

如何将chartjs条形图缩放设置为结果数据中的最高值

26
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档