gpt4 book ai didi

javascript - 更改特定图表 JS 的颜色 - Angular ChartJS 点

转载 作者:行者123 更新时间:2023-11-30 10:02:30 24 4
gpt4 key购买 nike

我有一个用 AngularJS 制作的折线图 - http://jtblin.github.io/angular-chart.js/#getting_started - 图表.js。

<canvas id="line" class="chart chart-line" data="data"
labels="labels" legend="true" series="series"
click="onClick" options="options">
</canvas>

$scope.labels = labels_filtered;
$scope.series = [word];
$scope.data = [_.values(response.graph_values)];

是否可以根据某些条件为图表中的某些点设置不同的颜色? (例如:对于值 > 10 的点设置红色,否则设置颜色绿色)

[编辑] 小演示链接:http://plnkr.co/edit/S0W5wPznMu4bCxRjOppl?p=preview .我想要的是将具有 80,81 值的点的颜色设置为红色,将其他点设置为另一种颜色。

谢谢。

最佳答案

您必须手动设置图表的点颜色:

myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)";

例子:

(function() {
var app = angular.module("Line_Chart", ["chart.js"]);
app.controller('LineChartController', function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series B'];

$scope.data = [
[65, 59, 80, 81, 56, 55, 40]
];

$scope.onClick = function(points, evt) {
console.log(points, evt);
};

$scope.$on("create", function(evt, chart) {
chart.datasets[0].points[4].fillColor = "red";
chart.update();
});
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/02639948a90edf92f018804ec25baea9fef71a84/angular-chart.js"></script>

<body ng-app="Line_Chart">
<div ng-controller="LineChartController">
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" click="onClick" options="options" colours="colours" chart="mychart">
</canvas>
</div>
</body>

关于javascript - 更改特定图表 JS 的颜色 - Angular ChartJS 点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30828394/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com