chartjs 的雷达图始终保持填充状态

Question

我正在尝试为 chartjs 的雷达图使用 datasetFill 选项，我注意到即使将 datasetFill 设置为 false，图表也始终保持填充状态。这是一个 link 到 fiddle 的例子，它给出了我正在尝试做的事情的示例 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

edit：刚刚合并了一个 pull request 来解决这个问题（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>

chartjs 的雷达图始终保持填充状态

Radar charts for chartjs always stay filled

charts

radar-chart

chart.js