如何在D3 Dimple中为不同的线条和线条系列正确分配单独的颜色？

Question

我有以下数据集......

  // DATA
  var dataSet1 = [
    { "Month": "January", "Date": 20150101, "Unit Sales": 3000, "Revenue": 2000 },
    { "Month": "April", "Date": 20150403, "Unit Sales": 500, "Revenue": 6000 },
    { "Month": "May", "Date": 20150530, "Unit Sales": 3000, "Revenue": 2000 },
    { "Month": "June", "Date": 20150620, "Unit Sales": 1500, "Revenue": 39000 },
    { "Month": "July", "Date": 20150706, "Unit Sales": 2500, "Revenue": 6000 },
    { "Month": "February", "Date": 20150205, "Unit Sales": 2500, "Revenue": 5000 },
    { "Month": "March", "Date": 20150307, "Unit Sales": 1500, "Revenue": 6000 },
    { "Month": "August", "Date": 20150816, "Unit Sales": 2500, "Revenue": 20000 },
    { "Month": "September", "Date": 20150907, "Unit Sales": 1500, "Revenue": 6000 },
    { "Month": "October", "Date": 20151009, "Unit Sales": 500, "Revenue": 9000 },
    { "Month": "November", "Date": 20151120, "Unit Sales": 50, "Revenue": 15000 },
    { "Month": "December", "Date": 20151222, "Unit Sales": 2000, "Revenue": 7000 }
  ];

而且，我有以下的Dimple函数试图绘制两条线，一条用于属性＆＃34; Unit Sales＆＃34;和一个属性＆＃34;收入＆＃34; ...

  function draw2(){
    var svg2 = dimple.newSvg("#chart2", 690, 600); // width x height
    var myChart = new dimple.chart(svg2, dataSet1);
    myChart.setBounds(60, 30, 505, 305);
    var x = myChart.addCategoryAxis("x", "Month");
    x.addOrderRule("Date");

    var y1 = myChart.addMeasureAxis("y", "Unit Sales");
    var y2 = myChart.addMeasureAxis("y", "Revenue");

    var line1 = myChart.addSeries(null, dimple.plot.line, [x,y1]);
    var line2 = myChart.addSeries(null, dimple.plot.line, [x,y2]);

    myChart.assignColor("Unit Sales", "blue"); // <------- ASSIGN COLOR HERE
    myChart.assignColor("Revenue", "red"); // <------- ASSIGN COLOR HERE

    //myChart.addLegend(180, 10, 260, 20, "right", line1);
    //myChart.addLegend(180, 10, 360, 20, "right", line2);

    line1.lineMarkers = true;
    line2.lineMarkers = true;
    myChart.draw();
  };

稍后通过调用...

调用该函数

draw2();

从上面的代码中，您可以看到我想将数据中的两个单独字段绘制为两个单独的行。我尝试通过创建两个单独的系列来完成此操作，每个系列都调用dimple.plot.line。

我尝试使用命令分配单独的颜色：

myChart.assignColor("Unit Sales", "blue"); // <------- ASSIGN COLOR HERE
myChart.assignColor("Revenue", "red"); // <------- ASSIGN COLOR HERE

然而，这不起作用。线条用相同的颜色绘制。 （另外，如果我添加一个图例，我只会得到一个标有＆＃34; All＆＃34的图例;而不是我尝试绘制的字段名称。）

我的问题：如何适当地绘制这两行并为它们分配单独的颜色？

感谢您提供的任何帮助。

Answer 1

我已编辑了一些内容，这是工作代码：

  var svg2 = dimple.newSvg("#chart2", 690, 600);
  var myChart = new dimple.chart(svg2, dataSet1);
  myChart.setBounds(60, 30, 505, 305);
  var x = myChart.addCategoryAxis("x", "Month");
  x.addOrderRule("Date");

  var y1 = myChart.addMeasureAxis("y", "Unit Sales");
  var y2 = myChart.addMeasureAxis("y", "Revenue");

  var line1 = myChart.addSeries("Sales",dimple.plot.line, [x, y1]);
  var line2 = myChart.addSeries("Profit", dimple.plot.line, [x, y2]);

  myChart.assignColor("Sales", "blue"); // <------- ASSIGN COLOR HERE
  myChart.assignColor("Profit", "green"); // <------- ASSIGN COLOR HERE

  myChart.addLegend(180, 10, 260, 20, "right", line1); 
  myChart.addLegend(180, 10, 360, 20, "right", line2); 

  line1.lineMarkers = true;
  line2.lineMarkers = true;
  myChart.draw();

我在addSeries部分中给出的销售额和利润仅用于为图表指定不同的颜色，它仍然是图例的标题。

var line1 = myChart.addSeries("Sales",dimple.plot.line, [x, y1]);
var line2 = myChart.addSeries("Profit", dimple.plot.line, [x, y2]);

以上是上述例子的答案：

http://jsbin.com/vewibajeru/edit?html,js,output