如何使用自己的調色板中Plottable.js餅圖

我有以下代碼：如何使用自己的調色板中Plottable.js餅圖

var scale = new Plottable.Scales.Linear(); 
 
var colorScale = new Plottable.Scales.Color(); 
 
var data = [{ val: 1 }, { val: 2 }, { val: 3 }, 
 
       { val: 4 }, { val: 5 }, { val: 6 }]; 
 

 
var plot = new Plottable.Plots.Pie() 
 
     .addDataset(new Plottable.Dataset(data)) 
 
     .sectorValue(function(d) { return d.val; }, scale) 
 
     .attr("fill", function(d) { return d.val; }, colorScale) 
 
      .renderTo("svg#example"); 
 

 
      window.addEventListener("resize", function() { 
 
       plot.redraw(); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 

 
    <!-- Later add new CSS to define the placement of the legend, fold change etc --> 
 
</head> 
 

 

 

 

 
<body> 
 
    <!-- Display the sliding bar --> 
 

 
    <svg width="100%" height="100%" id="example"></svg> 
 

 
    <!-- Act on the thing --> 
 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 

 
</body> 
 
</html>

如果您運行的代碼，你會發現，餅圖用默認顏色生成。

我想要做的是用我自己的調色板：

var tableau20 = ['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF'];

我怎樣才能做到這一點？

var colorScale = new Plottable.Scales.Color(tableau20);

來源

2015-12-02 neversaint

嘗試range()

var scale = new Plottable.Scales.Linear(); 
 
var colorScale = new Plottable.Scales.Color(); 
 
colorScale.range(['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', '#CFECF9', '#7F7F7F', '#BCBD22', '#17BECF']); 
 
var data = [{ val: 1 }, { val: 2 }, { val: 3 }, 
 
       { val: 4 }, { val: 5 }, { val: 6 }]; 
 

 
var plot = new Plottable.Plots.Pie() 
 
     .addDataset(new Plottable.Dataset(data)) 
 
     .sectorValue(function(d) { return d.val; }, scale) 
 
     .attr("fill", function(d) { return d.val; }, colorScale) 
 
      .renderTo("svg#example"); 
 

 
      window.addEventListener("resize", function() { 
 
       plot.redraw(); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 

 
    <!-- Later add new CSS to define the placement of the legend, fold change etc --> 
 
</head> 
 

 

 

 

 
<body> 
 
    <!-- Display the sliding bar --> 
 

 
    <svg width="100%" height="100%" id="example"></svg> 
 

 
    <!-- Act on the thing --> 
 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 

 
</body> 
 
</html>

來源

2015-12-02 09:55:33 madalinivascu

設置在ColorScale作品range()，但你也可以通過CSS改變全球的默認顏色：

.plottable-colors-0 { 
    background-color: #5279c7; /* INDIGO */ 
} 

.plottable-colors-1 { 
    background-color: #fd373e; /* CORAL_RED */ 
} 
...

...等。

來源

2015-12-02 21:55:42 jtlan

如何使用自己的調色板中Plottable.js餅圖

回答

相關問題