I have a line chart made with AngularJS - .js/#getting_started - Chart.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)];
Is it possible to set a different color for some point in the graph depending on some conditions? (for example: for points with value > 10 set color red, else set color green)
[Edit] Link to small demo: . What I would like is to set the colors of the dots with 80,81 values with red and the other points with another color.
Thanks.
I have a line chart made with AngularJS - http://jtblin.github.io/angular-chart.js/#getting_started - Chart.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)];
Is it possible to set a different color for some point in the graph depending on some conditions? (for example: for points with value > 10 set color red, else set color green)
[Edit] Link to small demo: http://plnkr.co/edit/S0W5wPznMu4bCxRjOppl?p=preview . What I would like is to set the colors of the dots with 80,81 values with red and the other points with another color.
Thanks.
Share Improve this question edited Jun 14, 2015 at 11:38 IceWhisper asked Jun 14, 2015 at 10:38 IceWhisperIceWhisper 8271 gold badge12 silver badges21 bronze badges 2- could you attached fiddle or plunkr.. – Pankaj Parkar Commented Jun 14, 2015 at 10:51
- link to plunkr – IceWhisper Commented Jun 14, 2015 at 11:33
4 Answers
Reset to default 2You will have to manually set point color of your chart:
myLineChart.datasets[0].points[4].fillColor = "rgba(000,111,111,55)" ;
Example:
(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./ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit./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>I don't think the angular version exposes the chart points directly.
But you could use the animation plete handler to update the point colors once the rendering is done. You can set the animation plete handler using the ChartJsProvider that the angular-chart.js provides
var app = angular.module("Line_Chart", ["chart.js"]).config(function(ChartJsProvider) {
ChartJsProvider.setOptions({ onAnimationComplete: function(){
this.datasets[0].points[2].fillColor = "red";
this.update()
} });
})
Plunkr - http://plnkr.co/edit/ggqcmpkhFXsinnm9aDbM?p=preview
Solutions that utilize chart.datasets[0].points[4].fillColor = "red"; type code no longer work in chart.js v2+.
However, dataset properties such as pointBorderColor accept arrays, which can be really useful. This lets you create an array of colors (or other properties) and you can set different properties for specific data points. You can also access the property in the array later and change it.
Example:
data: {
labels: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
datasets: [
{
fill: false,
lineTension: 0.4,
backgroundColor: [ "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)", "rgba(117, 201, 196,0.4)" ],
borderColor: "rgba(117, 201, 196, 0.8)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: [ "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)" ],
pointBackgroundColor: [ "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff" ],
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: [ "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)", "rgb(117, 201, 196)" ],
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
pointHitRadius: 10,
data: [ 1, 3, 6, 12, 18, 28, 17, 10, 3, 2 ],
spanGaps: false
}
]
}
I found another approach, but it is not the best solution.
In the file Chart.js I have changed this section of code by putting [index] to the pointColor object:
helpers.each(dataset.data,function(dataPoint,index){
datasetObject.points.push(new this.PointClass({
value : dataPoint,
label : data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.pointStrokeColor,
fillColor : dataset.pointColor[index],
and in the Angular Controller I put this line:
$scope.colours = [{pointColor:colours, fillColor: "#E7EDF0", strokeColor: "#A9C4D2"}];
where colours is an array of colors for each point in the graph.
*To make sure that is also accepts single values, one solution would be to check the type of object dataset.pointColor is and use it as single value or array.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745327370a4622721.html
评论列表（0条）