Радарные диаграммы для chartjs всегда остаются заполненными

Question

Я пытаюсь использовать параметр datasetFill для радарных диаграмм для диаграмм, и я заметил, что диаграммы всегда остаются заполненными, даже когда я устанавливаю datasetFill в false. Вот ссылка на скрипку, которая дает пример того, что я пытаюсь сделать 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); 

Answer 1

редактировать: Запрос тянуть просто сливались, чтобы решить эту проблему (https://github.com/nnnick/Chart.js/pull/1127), вам нужно будет построить chart.js основной файл, хотя, как это только в ГКЗ на данный момент просто клонируйте проект и запустите сборку 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>