我试图使用datasetFill选项的雷达图为chartjs，我注意到，图表总是保持填充，即使我设置datasetFill为假。这里有一个小提琴的链接，它给出了我正在尝试做的一个例子http://jsfiddle.net/5gHVY/143/。下面是代码:
//line chart data
var lineData = {
labels: ["Jan", "Feb", "March", "April", "May", "June", "July"],
datasets: [{
fillColor: "rgba(255,255,0,100)",
strokeColor: "rgba(63,169,245,1)",
pointColor: "rgba(63,169,245,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(255,255,255,0)",
strokeColor: "rgba(102,45,145,1)",
pointColor: "rgba(102,45,145,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}]
}
var lineOptions = {
animation: true,
pointDot: true,
scaleOverride : true,
scaleShowGridLines : false,
scaleShowLabels : true,
scaleSteps : 4,
scaleStepWidth : 25,
scaleStartValue : 25,
datasetFill: false,
};
var radarOptions = {
datasetFill: false,
};
//radar chart data
var radarData = {labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
datasets : [
{
fillColor: "rgba(102,45,145,.1)",
strokeColor: "rgba(102,45,145,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor: "rgba(63,169,245,.1)",
strokeColor: "rgba(63,169,245,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
//Create Line chart
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
//Create Radar chart
var ctx2 = document.getElementById("radarChart").getContext("2d");
var myNewChart2 = new Chart(ctx2).Radar(radarData, radarOptions);
edit:刚刚合并了一个拉请求来解决这个问题(https://github.com/nnnick/Chart.js/pull/1127)，你需要构建chart.js主文件，虽然它目前只在src中，只是克隆项目并运行gulp构建。
雷达绘制方法没有考虑到这个选项。在主图表js中出现修复之前，您可以扩展雷达图并覆盖绘制方法以考虑此选项
Chart.types.Radar.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "RadarAlt",
draw : function(ease){
var easeDecimal = ease || 1,
ctx = this.chart.ctx;
this.clear();
this.scale.draw();
Chart.helpers.each(this.datasets,function(dataset){
//Transition each point first so that the line and point drawing isn't out of sync
Chart.helpers.each(dataset.points,function(point,index){
if (point.hasValue()){
point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
}
},this);
//Draw the line between all the points
ctx.lineWidth = this.options.datasetStrokeWidth;
ctx.strokeStyle = dataset.strokeColor;
ctx.beginPath();
Chart.helpers.each(dataset.points,function(point,index){
if (index === 0){
ctx.moveTo(point.x,point.y);
}
else{
ctx.lineTo(point.x,point.y);
}
},this);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = dataset.fillColor;
if(this.options.datasetFill)
{
ctx.fill();
}
//Now draw the points over the line
//A little inefficient double looping, but better than the line
//lagging behind the point positions
Chart.helpers.each(dataset.points,function(point){
if (point.hasValue()){
point.draw();
}
});
},this);
}
});
Chart.types.Radar.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "RadarAlt",
draw: function(ease) {
var easeDecimal = ease || 1,
ctx = this.chart.ctx;
this.clear();
this.scale.draw();
Chart.helpers.each(this.datasets, function(dataset) {
//Transition each point first so that the line and point drawing isn't out of sync
Chart.helpers.each(dataset.points, function(point, index) {
if (point.hasValue()) {
point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
}
}, this);
//Draw the line between all the points
ctx.lineWidth = this.options.datasetStrokeWidth;
ctx.strokeStyle = dataset.strokeColor;
ctx.beginPath();
Chart.helpers.each(dataset.points, function(point, index) {
if (index === 0) {
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y);
}
}, this);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = dataset.fillColor;
if (this.options.datasetFill) {
ctx.fill();
}
//Now draw the points over the line
//A little inefficient double looping, but better than the line
//lagging behind the point positions
Chart.helpers.each(dataset.points, function(point) {
if (point.hasValue()) {
point.draw();
}
});
}, this);
}
});
var radarOptions = {
datasetFill: false,
};
//radar chart data
var radarData = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Partying", "Running"],
datasets: [{
fillColor: "rgba(102,45,145,.1)",
strokeColor: "rgba(102,45,145,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
fillColor: "rgba(63,169,245,.1)",
strokeColor: "rgba(63,169,245,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}]
}
//Create Radar chart
var ctx2 = document.getElementById("radarChart").getContext("2d");
var myNewRadarChart = new Chart(ctx2).RadarAlt(radarData, radarOptions);<script src="http://www.chartjs.org/assets/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="radarChart" width="800" height="650"></canvas>