javascript - 更改图表 d3 的颜色

标签 javascript d3.js dimple.js

我正在使用 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>

最佳答案

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

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

这是结果的屏幕截图:

enter image description here

关于javascript - 更改图表 d3 的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26911623/

相关文章:

javascript - 使用自定义 UI 创建 html 框

javascript - 为什么我的工具提示没有显示?

javascript - 带有自定义日期的数据dimple.js

angularjs - Angular 凹坑错误 TypeError : Cannot read property '_hasCategories' of null

javascript - 从 div 属性驱动 dimple.js 图表

javascript - Rails 3.2/Active Admin - 自定义 Assets 管道路径不起作用,导致 ActionView::Template::Error (file.js 未预编译)

javascript - Angular ng-repeat获取数组中的对象?

javascript - 如何检查 value 是否是 Handlebars 中的对象?

javascript - 将多个类名添加到元素 D3

d3.js - 在绘制文本之前计算文本的宽度