Updated fiddle, courtesy of echonax。如何将colorAxis添加到未绘制的categoryAxis？

我想将颜色编码应用于dimple.js中的线图区段，类似于this example。具体来说，我有一些分类数据（“状态”字段），我希望每个状态都对应一种特定的颜色。

我试过addColorAxis的所有变化，我可以想到，但解决方案无法解决。

这是我到目前为止有：

var svg = dimple.newSvg("#chartContainer", 1000, 1000); 
    chart = new dimple.chart(svg); 
    chart.setBounds(100, 100, 500, 300); 
    x = chart.addCategoryAxis("x", "project"); 
    y = chart.addTimeAxis("y", "date", "%Y-%m-%d", "%Y-%m-%d"); 

    y.addOrderRule("date"); 

    var lines = chart.addSeries(["project"], dimple.plot.line, [x, y]); 
    lines.data = [ 
      { "date" : '2016-01-01', "project" : "Grape", "status" : 1 }, 
      { "date" : '2016-01-08', "project" : "Grape", "status" : -2 }, 
      { "date" : '2016-01-07', "project" : "Apple", "status" : 3 }, 
      { "date" : '2016-01-08', "project" : "Apple", "status" : 1 }, 
      { "date" : '2016-01-02', "project" : "Banana", "status" : -2 }, 
      { "date" : '2016-01-15', "project" : "Banana", "status" : 2 }, 
     ]; 
    lines.lineWeight = 5; 
    lines.lineMarkers = true;

相关：好像y.addGroupOrderRule("date", false);并没有任何效果可言逆转日期。我希望最古老的日期在最高层，最新的日期在最低层。无法弄清楚。

编辑

我最新的尝试是复制colorAxis example单个类别，节省用于交换的X和Y轴。

var grape = [ 
     { "date" : '2016-01-01', "status" : 0, "fake_x" : 1}, 
     { "date" : '2016-01-08', "status" : 1, "fake_x" : 1}]; 
var svg = dimple.newSvg("#chartContainer", 590, 400); 

var myChart = new dimple.chart(svg, grape); 
myChart.setBounds(60, 30, 500, 300); 
var x = myChart.addCategoryAxis("x", "fake_x"); 
var y = myChart.addTimeAxis("y", "date"); 

// Order the x axis by date 
y.addOrderRule("date"); 

// Min price will be green, middle price yellow and max red 
myChart.addColorAxis("status", ["green", "yellow", "red"]); 

// Add a thick line with markers 
var lines = myChart.addSeries(null, dimple.plot.line); 
lines.lineWeight = 5; 
lines.lineMarkers = true; 

// Draw the chart 
myChart.draw();

结果虽然有同样的问题：

来源

2016-04-15 Alice

var chart = new dimple.chart(svg);

是打破你的代码行我把它改成

var chart = new dimple.chart(svg,data);

和现在它工作。这里是一个更新的小提琴

http://jsfiddle.net/1hotquwf/8/

来源

2016-04-15 07:36:54 echonax

谢谢！我想我的noobdom正在显示。 – Alice

仅供参考，您使用的是旧版本的酒窝。如果你升级到最新版本，你的原始代码将工作（我认为）。我不记得支持系列特定数据的第一个版本，但我认为它是在第2版附近。 –

得到它为单轴的工作，将发布一个更新，如果/当我得到它为分类轴正常工作。

var grape = [ 
     { "date" : '2016-01-01', "status" : 0, "fake_x" : 1}, 
     { "date" : '2016-01-15', "status" : 3, "fake_x" : 1}, 
     { "date" : '2016-01-08', "status" : 1, "fake_x" : 1}]; 

var svg = dimple.newSvg("#chartContainer", 590, 400); 
// Create and Position a Chart 
var chart = new dimple.chart(svg, grape); 
chart.setBounds(60, 30, 500, 300); 
var x = chart.addCategoryAxis("y", "date") 
chart.addMeasureAxis("x", "fake_x"); 

// Order the x axis by date 
x.addOrderRule("date"); 

// Min price will be green, middle price yellow and max red 
chart.addColorAxis("status", ["green", "yellow", "red"]); 

// Add a thick line with markers 
var lines = chart.addSeries(null, dimple.plot.line); 
lines.lineWeight = 5; 
lines.lineMarkers = true;

来源

2016-04-16 06:46:14 Alice

如何将colorAxis添加到未绘制的categoryAxis？

编辑

回答

相关问题