Question

我有以下代码，我试图绘制极坐标图（根据http://www.maani.us/xml_charts/index.php?menu=Gallery&submenu=Polar）：

var step = 360 / (c.chart_data[0][0].length - 1);
for (var i = 1; i < c.chart_data[0][0].length; i++) {
   paper.path([
      "M", c.chart_rect.x + c.chart_rect.width / 2, c.chart_rect.y + c.chart_rect.height / 2,
      c.chart_rect.x + c.chart_rect.width / 2 + (Math.cos(step * (i-1) * (Math.PI/180)) * (c.chart_rect.height / 2)),
      c.chart_rect.y + c.chart_rect.height / 2 + (Math.sin(step * (i-1) * (Math.PI/180)) * (c.chart_rect.height / 2))
   ]).attr({
      "stroke-width": c.chart_grid_v.thickness,
      stroke: c.chart_grid_v.color,
      "stroke-opacity": c.chart_grid_v.alpha,
      "stroke-dasharray": c.chart_grid_v.type
   });

   var text = paper.text(0, 0, c.chart_data[0][0][i]);
   text.attr({"font-size": c.axis_category.size, "font-family": c.axis_category.font, "font-weight": c.axis_category.bold});
   text.attr({fill: c.axis_category.color, opacity: c.axis_category.alpha});
   // Text is draw centered at x, y by default.
   text.transform("r" + (step * (i-1)).toString());
   text.translate(c.chart_rect.x + c.chart_rect.width / 2 + (Math.cos(step * (i-1) * (Math.PI/180)) * (c.chart_rect.height / 2 + 10)),
      c.chart_rect.y + c.chart_rect.height / 2 + (Math.sin(step * (i-1) * (Math.PI/180)) * (c.chart_rect.height / 2 + 10)));
}

chart_data指的是：

chart_data: [
                           // Quartiles data.
                           [
                              [null, "North", "", "North\nEast", "", "East", "", "South\nEast", "",
                               "South", "", "South\nWest", "", "West", "", "North\nWest", ""],
                              ["Summer", 12, 15, 20, 15, 10, 7, 8, 6, 6, 5, 6, 6, 7, 8, 10, 10],
                              ["Autumn", 10, 10, 15, 25, 30, 35, 32, 30, 25, 22, 18, 10, 8, 5, 7, 10],
                              ["Winter", 10, 10, 15, 20, 25, 30, 40, 50, 40, 30, 30, 25, 20, 10, 10, 10],
                              ["Spring", 2, 10, 15, 15, 20, 25, 25, 22, 20, 15, 10, 12, 10, 7, 5, 3]
                           ]
                        ],

径向网格线正常工作，但这些径向线末端的文本不起作用。转换似乎在增加前一个转换。如果我使用transform("")清除转换也不起作用，而只是将所有文本打印在彼此之上。

当我绘制

的结果时

c.chart_rect.x + c.chart_rect.width / 2 + (Math.cos(step * (i-1) * (Math.PI/180)) * (c.chart_rect.height / 2 + 10)),
            c.chart_rect.y + c.chart_rect.height / 2 + (Math.sin(step * (i-1) * (Math.PI/180)) * (c.chart_rect.height / 2 + 10))

在Excel中他们正确地形成一个圆圈。

我还需要使用text.getBBox().height来进一步抵消文本，这会导致进一步的复杂化。

有人知道我哪里出错吗？

RaphaelJS极地图表文字绘制不正确

0 个答案: