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

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

charts chart.js radar-chart
person user2970660    schedule 20.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

edit: запрос на перенос был только что объединен для решения этой проблемы (https://github.com/nnnick/Chart.js/pull/1127), вам нужно будет создать основной файл chart.js, хотя пока он находится только в src, просто клонируйте проект и запустите сборку gulp.

Метод рисования радара не учитывает эту опцию. Пока исправление не присутствует в основном Chart 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>

person Quince    schedule 20.05.2015