Question

我试图在凹坑中制作一个水平条形图，它将（1）对降序值进行排序，并且（2）将刻度线设置为“.2f”（小数点后2位），因此工具提示也有2个小数位。

下面的代码默认按升序值排序，即使我将.addOrderRule设置为true，并且在指定.tickFormat

时甚至不绘制图表

我做错了什么？看起来很简单，但我一直在绞尽脑汁！

    <script type="text/javascript">

    var margin = 75,
        width = 1000 - margin,
        height = 500 - margin;

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width + margin)
        .attr("height", height + margin);

    d3.csv("flower-prices.csv", function (data) {

      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(150, 30, 700, 350);

      var x = myChart.addMeasureAxis("x", "avgprice");
      x.tickFormat(".2f");

      var y = myChart.addCategoryAxis("y", "strain");

      var series = myChart.addSeries(null, dimple.plot.bar);
      series.addOrderRule("avgprice", true);

      myChart.draw();

    });

    </script>

Answer 1

axis.tickFormat是正确的，但需要将其设置为成员属性，而不是使用函数表示法。因此，您只需要使用：

x.tickFormat = ".2f";

订单规则需要应用于轴而不是系列（系列订单规则会影响条形图中的堆栈顺序，这与此处无关）。降序/升序也是基于零而不是顶部所以（可能有点反直觉）默认是降序，我猜你想升序所以它应该是：

y.addOrderRule("avgprice", false);

按addOrderRule排序并调整刻度

1 个答案: