文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Plottable.js饼图中使用自己的调色板

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

Stack Overflow用户

提问于 2015-12-02 09:38:25

回答 2查看 571关注 0票数 0

我有以下代码：

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

javascript

jquery

plottable

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-12-02 09:55:33

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

票数 1

Stack Overflow用户

发布于 2015-12-02 21:55:42

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

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

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

...etc。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34039324

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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