Question

我有以下代码：

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);

Answer 1

尝试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>

Answer 2

在range() Color上设置Scale有效，但您也可以通过CSS全局更改默认颜色：

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

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

...等

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

2 个答案: