Question

我正在使用dimple.plot.pie制作一个简单的饼图，显示不同age_groups的相对人口：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
    var svg = dimple.newSvg("body", 690, 400);
    d3.csv("data.csv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(20, 20, 660, 360)
      myChart.addMeasureAxis("p", "Population");
      myChart.addColorAxis("Age_Group",["#FF0000","#00FF00"]);
      mySeries = myChart.addSeries("Age_Group", dimple.plot.pie);
      mySeries.addOrderRule([0,10,20,30,40,50,60,70,80,90,100]);
      myChart.draw();
    });
  </script>
    </body>
</html>

以上工作完全符合预期如果我注释掉addColorAxis行。我得到一个饼图，上面有适当的切片，一个图例等等。

但是对于我的演示文稿，我真的需要为饼图片指定一个特定的着色，所以我添加了addColorAxis方法，该方法按预期工作，但图例没有显示。

我希望两者都有一个工作色轴（或某种方式来指定从颜色到切片的匹配）以及一个工作的图例。我是JavaScript的新手。

提前致谢。

Answer 1

颜色轴不适用于图例 - 它适用于连续数据，它适用于您的情况，因为您的分类数据是数字但不是这样的。要为分类数据分配特定颜色，您可以使用assignColor方法：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js">
        </script>
    </head>
    <body>
        <script type="text/javascript">
            var svg = dimple.newSvg("body", 690, 400);
            d3.csv("data.csv", function (data) {
                var myChart = new dimple.chart(svg, data);
                myChart.setBounds(20, 20, 660, 360)
                myChart.addMeasureAxis("p", "Population");
                mySeries = myChart.addSeries("Age_Group", dimple.plot.pie);
                myChart.assignColor("0", "#FF0000")
                myChart.assignColor("10", "#E61E00")
                myChart.assignColor("20", "#CD3700")
                myChart.assignColor("30", "#B45000")
                myChart.assignColor("40", "#9B6900")
                myChart.assignColor("50", "#828200")
                myChart.assignColor("60", "#699B00")
                myChart.assignColor("70", "#50B400")
                myChart.assignColor("80", "#37CD00")
                myChart.assignColor("90", "#1EE600")
                myChart.assignColor("100", "#00FF00")
                mySeries.addOrderRule([0,10,20,30,40,50,60,70,80,90,100]);
                myChart.draw();
            });
        </script>
    </body>
</html>

dimple.js addColorAxis可防止渲染图例

1 个答案: