Question

我正在使用d3 js和dimpel js我有一个折线图代码在这里工作得很好但是当我想改变这个折线图中的点的颜色时它不会改变这里的错误!!任何帮助都会感激不尽
html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
 <div id="chartContainer"></div>
</body>
<script src="js/d3.js" charset="utf-8"></script>
<script src="js/dimple.js"></script>
<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 600, 400),
            data = [
                { "Value" : 100000, "Year" : 2009 },
                { "Value" : 110000, "Year" : 2010 },
                { "Value" : 100, "Year" : 2011 },
                { "Value" : 140000, "Year" : 2012 },
                { "Value" : 120000, "Year" : 2013 },
                { "Value" : 140000, "Year" : 2014 }
            ];

    var chart = new dimple.chart(svg, data);
    var x = chart.addCategoryAxis("x", "Year");
    x.addOrderRule("Year");
    var y = chart.addCategoryAxis("y", "Value");
   //this line have dosen't work!!!!
   chart.addColorAxis("Value", ["green", "yellow", "red"]);
    var lines = chart.addSeries(null, dimple.plot.line);
    lines.lineWeight = 5;
    lines.lineMarkers = true;
    chart.draw();
</script>
</html>

Answer 1

您遇到的问题源于您将y轴添加为categoryAxis而不是measureAxis。如果您将y更改为measureAxis，那么您的代码就可以完美运行：

var y = chart.addMeasureAxis("y", "Value");

以下是结果的屏幕截图：

enter image description here

更改图表d3的颜色

1 个答案: