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？

編輯

回答

相關問題