Question

我正在使用chartjs从数据库查询的结果生成极坐标图，并且发现需要反转段的顺序。默认情况下，极坐标图按照顺时针顺序绘制分段...是否可以让它逆时针转动？

由于

Answer 1

我想出了一种扩展PolarArea图表以生成我需要的结果的方法。它实际上并不是逆时针方向，但就我目前的目的而言，它正在发挥作用。

以下是绘制图表的PolarArea图表的一部分：

        draw : function(ease){
        var easingDecimal = ease || 1;
        //Clear & draw the canvas
        this.clear();
        helpers.each(this.segments,function(segment, index){
            segment.transition({
                circumference : this.scale.getCircumference(),
                outerRadius : this.scale.calculateCenterOffset(segment.value)
            },easingDecimal);

            segment.endAngle = segment.startAngle + segment.circumference;

            // If we've removed the first segment we need to set the first one to
            // start at the top.
            if (index === 0){
                segment.startAngle = this.options.startAngle; //Math.PI * 1.5;
            }

            //Check to see if it's the last segment, if not get the next and update the start angle
            if (index < this.segments.length - 1){
                this.segments[index+1].startAngle = segment.endAngle;
            }
            segment.draw();
        }, this);
        this.scale.draw();
    }

所以，经过一番思考，以及一些试验＆amp;错误，我刚刚改变了这个：

this.segments[index+1].startAngle = segment.endAngle;

到此：

this.segments[index+1].startAngle = segment.endAngle + segment.circumference;

因此，虽然它仍以顺时针顺序绘制片段，但在第一个片段之后绘制每个片段之前，它会“跳过”“片段空间”。对于三个段，结果是在段1中绘制数据点1，跳过段2，在段3中绘制数据点2，跳过段1，在段2中绘制数据点3。

不完全优雅......它不适用于任何其他数量的数据点（奇数个数据点将生成图形，但段的顺序将关闭）...但它解决了我的直接问题挑战。

Answer 2

为什么不反转数据阵列？

＆＃13;

// sort by smallest first
myArray.sort(function(a,b) {
    return a.value - b.value;
});

// draw Chart
new Chart(ctx).Pie(myArray, options);

＆＃13;

是否可以反转极坐标图中段的显示顺序？

2 个答案: