Angular ChartJs颜色选项不起作用
Angular ChartJs是一个用于在Angular应用程序中创建图表的库。它基于Chart.js，提供了一种简单而强大的方式来可视化数据。
在Angular ChartJs中，颜色选项可以用于自定义图表的颜色。然而，有时候可能会遇到颜色选项不起作用的情况。这可能是由于以下几个原因导致的：
- 配置错误：首先，需要确保正确地配置了颜色选项。在Angular ChartJs中，颜色选项通常是一个数组，其中包含要使用的颜色。确保正确地设置了颜色选项，并且颜色值是有效的。
- 版本兼容性问题：Angular ChartJs和Chart.js都有不同的版本，可能存在版本之间的兼容性问题。确保使用的Angular ChartJs和Chart.js版本是兼容的，并且建议使用最新版本。
- 样式覆盖：有时候，其他样式可能会覆盖颜色选项的设置。检查是否有其他CSS样式或脚本文件正在修改图表的颜色，如果有，请确保正确地设置了优先级或调整样式。
- 数据问题：颜色选项可能不起作用是因为数据问题。确保数据正确地传递给了图表，并且每个数据点都有相应的颜色选项。
如果以上方法都无法解决问题，可以尝试查阅Angular ChartJs的官方文档或社区论坛，寻求更多的帮助和支持。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。
- 腾讯云云服务器（CVM）：腾讯云提供的弹性计算服务，可快速部署和扩展应用程序。了解更多信息，请访问：腾讯云云服务器（CVM）
- 腾讯云云数据库MySQL：腾讯云提供的高性能、可扩展的关系型数据库服务。了解更多信息，请访问：腾讯云云数据库MySQL
相关·内容
这个问题是关于angular-chartjs 1.1.1的。
首先，我想禁用图表上的悬停颜色。我已经将以下选项设置为false：
tooltips: {
enabled: false
},
hover: {
enabled: false
},
这不起作用，所以我决定更改我的甜甜圈图表的颜色，包括highlightColor。为了设置颜色，我在画布上添加了指令chart-colors="colors"。在我的作用域中，我添加了以下内容：
$scope.colors = [{
fill: true,
backgroundColor: ["#F
浏览 2提问于2017-02-21得票数 1
回答已采纳
1回答
我试着用下面的库对我的条形图进行着色，虽然我没有做到这一点，而且颜色总是随机的。数据运行良好。我已经包括了什么样的版本和订单，他们是加载在下面。希望这能有所帮助。
任何帮助都很感激。
非常感谢，
代码片段
<script src="js/chartjs/Chart.js" defer></script>
<script src="js/angular-chart/angular-chart.min.js" defer></script>
库版本化
AngularJS v1.5.0-rc.2
Chart.js
浏览 7提问于2017-01-09得票数 1
回答已采纳
我有一个Angular 7(离子4)项目，在那里我尝试了Chart.js，需要能够在饼图上自定义绘制一些标签，就像我问here的那样。 我被告知我需要使用一个单独的包，但我不能使用npm包为Angular项目进行导入。 我有以下版本... "chart.js": "^2.8.0",
"chartjs-plugin-datalabels": "^0.6.0",
....
"@angular/*": "^7.2.2",
"typescript": "~3.1.6" 我已
浏览 19提问于2019-04-11得票数 3
(对不起我的英文)我使用chartjs-plugin-streaming实时chartjs，我想使用chartjs-plugin-zoom。
但是变焦不起作用。
当我测试缩放时，出现缩放区域，但在图表中离开鼠标时，什么也没有发生
我看到chartjs-plugin-zoom的方法doZoom被调用了，然后我认为问题出在流插件中，但我不知道具体在哪里。
我之前测试过调用pause streaming来进行缩放，但也有同样的问题。
我能做些什么来使变焦工作？
谢谢
浏览 18提问于2018-08-10得票数 3
回答已采纳
1回答
我试着构建这样的图形：
。它基本上是依赖树。每个节点都有它所依赖的元素列表(在列表中)，或者简单的具有名称和大小的json (请参见下面的结构)。有关详细信息，请参阅
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"
浏览 3提问于2016-10-30得票数 0
回答已采纳
我的想法很简单:我需要一个chartjs，而不是只需要一种颜色，我需要在同一条线上绘制不同的颜色，如下所示： ?
浏览 53提问于2020-05-04得票数 0
我正在使用Ionic 3，我正在显示一个条形图，我需要在图表上的条形图旁边显示数据标签，就像这个问题how to display data values on Chart.js 我按照到目前为止为chartjs-plugin-datalabels找到的说明进行了操作，但不起作用，它在我的图表上没有显示任何数据标签。 我通过npm安装了chartjs和chartjs-plugin-datalabels，它们在我的package.json中看起来像这样 "chart.js": "^2.7.3",
"chartjs-plugin-datalabels"
浏览 25提问于2019-02-06得票数 2
回答已采纳
我试图在stackblitz中创建一个angular6 Primeng 6应用程序。我用的是PrimeNg图表。此外，我还想添加使用chartjs-plugin-datalabels和chartjs-plugin-funnel。我可以使用ChartJs和chartjs插件数据标记，但无法找到如何使用chartjs-plugin-funnel.。
我的Stackbliz
浏览 0提问于2018-10-13得票数 0
回答已采纳
我怎样才能在Y轴的两条线之间添加背景颜色，如果你检查了图形，我需要做这样的设置--两行之间的颜色--首先是橙色，然后是蓝色，或者其他什么，我检查了官方文档，但是没有找到任何东西。
这也是我的图表配置
this.options = {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
gridLines: {
display: true,
浏览 0提问于2018-03-15得票数 3
回答已采纳
我必须使用react-chartjs-2创建堆叠条形图。
options : {
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true
}]
}
}
堆叠在酒吧似乎不起作用。
我使用chartjs
浏览 2提问于2017-05-26得票数 8
回答已采纳
如何在Chartjs中更改x轴(水平轴)的宽度和颜色？它似乎对y轴(垂直轴)使用zeroLineColor和zeroLineWidth，但对x轴不起作用。
如果我们加上：
ticks: {
beginAtZero: true
}
它像预期的那样工作，但我不希望垂直滴答从0开始。
有什么办法让这事发生吗？
scales: {
xAxes: [{
gridLines: {
zeroLineColor: 'black', // WORKS
zeroLineWidth: 2 // WORKS
浏览 11提问于2022-01-07得票数 2
我正在尝试实现vue-chartjs甜甜圈，但我无法正确地得到颜色。
这是我使用的组件甜甜圈
my App.vue
<template>
<div id="app">
<label for="Doughnut">Doughnut</label>
<div id="ChartDoughnut">
<ChartDoughnut :chartData="chartDataDoughnut" />
</div&g
浏览 6提问于2020-03-06得票数 1
回答已采纳
我正在处理chartJs，其中条形背景颜色应该根据yLabel中的值来确定。 如何访问chartjs中特定条块的yLabel进行比较？ const waterFChart = new Chart(canvasRef.current, {
plugins: [ChartDataLabels],
type: "bar",
data: {
labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"]
浏览 17提问于2021-10-01得票数 0
回答已采纳
1回答
我想在我的angular应用程序中实现图表。所以我使用了ChartJs。我实现了显示图表的方法，但它的问题在编译时给出了错误。 ? 我的base-chart.directive.d.ts文件如下。 import { OnDestroy, OnChanges, OnInit, EventEmitter, ElementRef, SimpleChanges, DoCheck } from '@angular/core';
import * as chartJs from 'chart.js';
import { Color } from './colo
浏览 5提问于2020-01-12得票数 0
1回答
大家好，我正在尝试使用JS库ChartJS (上面的图是用Python创建的)来复制这个图。正如你所看到的，这不是一个真正的线状图--它是一个有连接线的散点图。我很难在ChartJS中重新创建它--库似乎想用曲线连接点，并用默认的“线”图表类型填充区域，而我不知道如何处理‘分散’类型。此外，我还没有弄清楚如何使背景的颜色如图所示。我将非常感谢任何帮助或代码示例。
浏览 4提问于2020-08-19得票数 1
回答已采纳
我有一个角4应用程序，我正在使用angular2-chartjs来绘制我的应用程序中的图表。
在组件中，我导入了以下内容：
import { ChartComponent } from 'angular2-chartjs';
import { ChartModule } from 'angular2-chartjs';
创建图表属性：
@ViewChild(ChartComponent) chart: ChartComponent;
现在，我将这个图表对象从组件中传递给服务的方法：
this.chartService.updateChartWith(this.c
浏览 0提问于2018-10-23得票数 4
回答已采纳
我在一个js中有以下代码，
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
mounted () {
// Overwriting base render method with actual data.
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June
浏览 2提问于2018-03-16得票数 0
我试图改变我的ChartJS图表的画布背景颜色，以导出它作为一个图像，但它有一个黑色的背景。我试过从文档中找到解决办法，但似乎不起作用。我添加了插件定义，这是从ChartJS文档到我的chartData的一个例子。我相信我听从了ChartJS和vue-chartjs医生的话，但我不明白我做错了什么。还有别的办法吗？
// inside vue template
<BarChart id="barChart" :chartData="chartData"/>
// inside js script
const chartData = {
浏览 3提问于2022-05-01得票数 0
我使用的是Chartjs.Blazor，而且我还不能像这里描述的那样：
我有一个颜色列表(rgba，或颜色名称，我可以选择)在List<String>的形式下。
colors = ["rgba(255,0,0,1)", "rgba(0,255,0,1)", "rgba(0,0,255,1)", "rgba(255,0,0,1)", "rgba(0,255,0,1)"];
我尝试使用LineDataset.PointBackgroundColor属性指定颜色：
var _linebarDataSet =
浏览 0提问于2020-11-03得票数 0
回答已采纳
1回答
我在一个angular 7应用程序中使用ChartJS。我想禁用我的line系列的动画，因为该系列正在不断更新。我已尝试设置
options: {
animations: false
}
以及
options: {
animation: {
duration: 0
}
}
这两种方法都不起作用。
是否有其他选项/功能需要添加到图表配置中以禁用动画？
浏览 31提问于2018-12-15得票数 2
我正在使用ChartJs来显示图形，并尝试在基于ChartJs文档的options上使用height来定制工具提示高度。
但是它不起作用。这是我图表上的option。
options {
tooltips: {
mode: 'point',
intersect: true,
xPadding: 10,
yPadding: 10,
bodySpacing: 4,
backgroundColor: '#fff',
borderColor:
浏览 1提问于2020-06-10得票数 0
1回答
在Angular应用程序中使用chart.js的注解插件，所以我很抱歉，如果这是一种具体的。注释插件应该做的是在x轴上的value=1处创建一条垂直线。 然而，在这一点上，什么都没有出现。没有抛出错误或者类似的东西，但是没有行。 我的图表上的x轴是浮动形式的，所以我尝试了value=1.0，但是这并不成功。我应该指出的是，colorschemes插件工作得很好，所以插件也不是因为某种原因被禁用的。 import * as Chart from 'chart.js';
import 'chartjs-plugin-colorschemes';
import &#
浏览 9提问于2019-06-21得票数 0
回答已采纳
2回答
我正在尝试在我的角度项目中实现chart.js。编译时没有任何错误，但没有显示图表。我也不知道原因。
我是chartjs.component.html
<canvas id="canvas">{{chart}}</canvas>
我是chartjs.component.ts
import { Component, OnInit } from '@angular/core';
import { Chart } from "chart.js";
@Component({
selector: 'app-chartj
浏览 0提问于2018-11-06得票数 2
回答已采纳
0回答
所以我有一个画布元素，我想用Angular库绘制一个图表。我设法绘制了它，但问题是画布元素并不采用包含div的高度，它采用一个随机的高度。以前有没有人遇到过这个问题？我还使用了ChartJs库()中的resize()方法，但似乎不起作用。有谁有主意吗？
提前感谢！
浏览 1提问于2016-07-15得票数 0
回答已采纳
我正在使用vue-chartjs和chartjs-plugin-colorschemes来设计一个圆环图的样式。我试着让用户选择他们喜欢的主题。我有它90%的工作；用户可以选择一个主题，点击更新，甜甜圈加上它的标签正确地改变颜色。不起作用的是，在初始页面加载时，甜甜圈有配色方案，但图例没有。 我目前正在传递一个默认的主题作为道具，并且我正在使用一个watch方法来观察主题的变化。该错误发生在此watch方法内部。 如何动态更新图例标签颜色？下面是我的组件的一个最小示例： <script>
/* eslint-disable no-new */
import convert
浏览 22提问于2020-12-03得票数 0
回答已采纳
1回答
我正在寻找删除标签，在广场上的以下图片：。我该怎么做？我试过用options: {plugins: {legend: display: false}}，但它似乎不起作用。我使用的包是react-chartjs-2
这是代码：
<Chart type="line" data={{
labels: props.sets[0],
datasets: props.dataset,
options: {
plugins: {
legend: {
display: false,
},
}
}
}} /
浏览 3提问于2022-02-07得票数 1
回答已采纳
1回答
如何更改标签的默认颜色？
这是默认的图表实现，希望有人能帮我
<script>
import { Pie} from 'vue-chartjs'
export default Pie.extend({
props: ['one', 'two', 'three'],
mounted () {
// Overwriting base render method with actual data.
this.renderChart({
labels: ['One'
浏览 1提问于2017-03-26得票数 0
回答已采纳
1回答
我正在使用带有Chartjs的Angular 5。我有一个图表，我想让高度根据一个布尔变量(show)改变。如果为真，我希望高度为25。如果为false，我希望高度为65。我试过了，但不起作用。如何有条件地更改高度？
<div [hidden]="!chart" style="position: relative; float: left; ">
<canvas id="canvas" width="100" height="{show ? '25':'6
浏览 0提问于2018-09-15得票数 1
我想在“图表”组件上设置一些默认选项，以避免在调用我的组件的每个类中追加这些选项。
在vue-chartjs 3中，可以调用renderChart方法并重写图表的当前选项，但我无法使用 vue -chartjs 4和vue 3组合API复制它。
Ex.在vue-chartjs 3
import { Line, mixins } from 'vue-chartjs'
export default {
extends: Line,
mixins: [mixins.reactiveProp],
props: ['chartData', 'opti
浏览 15提问于2022-06-22得票数 0
目前，我可以更改单个点的颜色(在折线图上)，当您单击它时，它会立即更改回以前的颜色，我如何防止这种情况？
下面是我的函数：
var options = {
onClick: function(e){
var element = this.getElementAtEvent(e);
if (element.length > 0) {
element[0]._view.backgroundColor = '#FFF';
this.update();
}
}
我在这里发现了同样的问题，，显然这个人能够管理它，但我认为代码不再兼
浏览 0提问于2017-04-10得票数 8
回答已采纳
我在使用chartJS和primeNG时遇到了这个错误： ERROR TypeError: chart_js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor
at UIChart.initChart (primeng-chart.js:48)
at UIChart.ngAfterViewInit (primeng-chart.js:29)
at callHook (core.js:3038)
at callHooks (core.js:3008)
at executeInitAndCheckHooks
浏览 190提问于2021-04-09得票数 16
回答已采纳
? 我正在尝试将Chartjs添加到我的angular应用程序中。它不会加载图形中的最低值 我的代码 <canvas id="myChart" width="100" height="100" ng-if=""></canvas>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
浏览 11提问于2019-04-09得票数 0
回答已采纳
在ChartJS中，如果我们单击图例，那么我们单击的部分将消失。这种情况能逆转吗？例如，如果我们单击图例，那么除了该部分之外，图表中的所有其他部分都应该会消失。这个是可能的吗？有没有人能对此提出任何解决方案?我必须在angular 2+上完成此操作。提前谢谢。
浏览 0提问于2018-04-04得票数 1
遵循react-chartjs-2文档并在codesandbox上设置饼图可以让一切正常工作，只是选项不起作用。
浏览 59提问于2021-05-10得票数 0
回答已采纳
日安，
在我的角项目中，我想使用图表插件，因此我运行这两个命令如下：
npm install angular2-chartjs
npm install chartjs-plugin-labels
然后将其导入我的ts文件中，如下所示：
import { ChartModule } from 'angular2-chartjs';
import 'chartjs-plugin-labels';
在我的package.json里，我有这样的东西：
"angular2-chartjs": "^0.5.1",
"chartjs-p
浏览 5提问于2022-06-14得票数 2
回答已采纳
1回答
AngularJs和图表
、、、
我正在尝试用创建图表。然后，我按照文档中所需的步骤和需求执行，但画布标记没有呈现任何内容。
我的布局HTML：
<div class="content-wrapper"> <div class="container"> <section class="content"> @RenderBody() </section> </div>
我
浏览 4提问于2016-07-05得票数 1
2回答
我正在构建一个Twitter类型的应用程序，它有一个类型记录/Angular2 2前端框架和一个Node.js后端。我遵循Levi的Range2Projects视频教程的代码，尽管我不是使用他的Gulpfile，而是使用systemjs.config.js运行应用程序。
我正在将Chart.js注入到我的systemjs.config.js文件中，我还包括一个in index.html。然而，我无法使Chart.js在我的应用程序中工作，我一直在尝试不同的解决方案，并且不断地在我的浏览器控制台中出现错误。所有的Chart.js文件都在我的./node_modules文件夹中。
我将展示我尝试过
浏览 5提问于2016-10-24得票数 0
我正在尝试使用chart.js和chartjs-plugin- stream将数据流式传输到canvas中。它使用随机数据可以完美地工作。但是，如何流式传输我的自定义数据呢？
流式随机数据运行良好(每2秒更新一次)。
tab1.page.html
<div>
<canvas
baseChart
[chartType]="'line'"
[datasets]="datasets"
[options]="options">
&l
浏览 0提问于2021-06-13得票数 1
1回答
我希望从Chartjs：复制这个示例的结果。
我要找的是x上的比例结果：
我使用react-chartjs-2和示例的简化版本，但我为x轴保留了相同的配置和数据：
import { DateTime } from 'luxon';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, registerables } from 'chart.js';
import 'chartjs-adapter-luxon';
ChartJS.register
浏览 4提问于2022-02-10得票数 1
回答已采纳
我正在开发一个angular应用程序，并使用chartsjs和chartjs-plugin-datalable来构建horizontalBar。 Current chart 然而，有些数据是隐藏的，我无法解析它。 这是配置代码 this.dataFill = {
title: {
display: false
},
legend: {
position: 'right',
display: false
},
scales: {
浏览 33提问于2021-07-26得票数 1
回答已采纳
我使用的是Chartjs的angularjs包装器。当从推送事件程序接收到新数据时，我正在更新图形。此外，我还在选定的图形数据集之间上色。
当我转到另一个页面并再次返回到图表页面时，数据集颜色的不透明度增加，最终不透明度消失。在我看来，当我重新访问页面时，数据集的颜色并没有被清除。然而，当我刷新页面时，这个问题就解决了。
如何在重新访问时清除以前的数据集详细信息。
我尝试了chart.clear()，但不起作用
浏览 4提问于2018-07-06得票数 0
我刚开始使用Angular.JS，想用chart.js制作图表
我已经安装了chart.js
npm安装角图npm保存
.state('index.dashboard', {
url: "/dashboard",
templateUrl: "modules/dashboard/dashboard.html",
controller: 'dashboardController',
data: { pageTitle: 'Dashb
浏览 2提问于2016-12-29得票数 0
回答已采纳
我和angular-chartjs有个问题，让我发疯了。
我有一个引导下拉(使用angular-ui-bootstrap)在一个，由angular-chartjs使用。
当图表的数据源中有超过7项时，单击下拉菜单将使图表重新绘制一次。我无法解释为什么会发生这种事。
Jsfiddle：
转到第二个选项卡，在下拉菜单中单击。图表将重新绘制。现在转到javascript代码，更改最后一行调用updateData2()而不是updateData()，问题就解决了。在updateData2()中向数组中添加超过7个项也会导致问题的发生。
到底怎么回事？
浏览 0提问于2017-05-14得票数 1
回答已采纳
我正在从chartjs2.9.4更新到3.8.0，并且在ChartConfiguration对象上设置ChartConfiguration参数时出错。
error TS2339: Property 'time' does not exist on type
'_DeepPartialObject<{ type: "linear"; } & CartesianScaleOptions & { beginAtZero: boolean; suggestedMin?: number; suggestedMax?: number; gra
浏览 12提问于2022-06-22得票数 0
我已经升级了角度计划，从7到12，现在它给我以下的问题，同时做服务。
Generating browser application bundles (phase: setup)...D:\Projects\CCM_Dashboard\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40
throw new Error("The target entry-point \"" + invalidTarg
浏览 11提问于2022-06-30得票数 0
6回答
如果某一值高于某一值，是否有一种方法可以将不同的颜色设置为线条图中的数据点？
我为dxChart - 找到了这个例子，现在正在为ChartJS寻找类似的东西。
浏览 1提问于2015-01-26得票数 34
回答已采纳
1回答
我已经完成了基于初学者空(没有所有库)的项目。我在angular2-chartjs中导入了package.json库。图表绘制正确。
当我收到服务器的响应时，我需要用异步方式更新图表的数据。。
我阅读了Chart.js的文档，该文档以如下方式报告更新数据的方式：
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
浏览 0提问于2018-04-27得票数 4
1回答
我想用chartjs包构建一个动态饼图。我在上发现了一个简单的代码，但它对我不起作用。
当我使用以下代码时：
library(chartjs)
chartjs(mtcars[1:6,], mpg, qsec) %>%
cjsPie
我得到：
chartjs(mtcars1 1:6，mpg，qsec)：找不到对象'qsec‘
有人找到解决办法了吗？
浏览 1提问于2018-10-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
