如何在Plottable.js饼图中使用自己的调色板

I have the following code:

我有以下代码:

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>

If you run the code you'll notice that the pie chart is generated with the default colors.

如果运行代码,您会注意到饼图是使用默认颜色生成的。

What I want to do is to use my own color palette:

我想要做的是使用我自己的调色板:

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

How can I do that?

我怎样才能做到这一点?

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

2 个解决方案

#1

try 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>

#2

Setting the range() on the Color Scale works, but you can also change the default colors globally via CSS:

设置“色阶”上的范围()有效,但您也可以通过CSS全局更改默认颜色:

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

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

...etc.

#1