文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Plottable.js直方图中启用图例

问如何在Plottable.js直方图中启用图例
EN

Stack Overflow用户

提问于 2015-09-24 17:20:35

回答 1查看 226关注 0票数 0

我有以下脚本。它只需在给定数据中绘制直方图。

"use strict";

var xScale = new Plottable.Scales.Category();
var yScale = new Plottable.Scales.Linear();
var colorScale = new Plottable.Scales.Color();



var primaryData = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 }, { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }];
var secondaryData = [{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 2 }, { x: 4, y: 1 }, { x: 5, y: 2 }, { x: 6, y: 1 }];

var plot = new Plottable.Plots.ClusteredBar().addDataset(new Plottable.Dataset(primaryData).metadata(5)).addDataset(new Plottable.Dataset(secondaryData).metadata(3)).x(function (d) {
                   return d.x;
}, xScale).y(function (d) {
                   return d.y;
}, yScale).attr("fill", function (d, i, dataset) {
                   return dataset.metadata();
}, colorScale).renderTo("svg#example");


// Why this legend does not appear.
var legend = new Plottable.Components.Legend(colorScale);
legend.xAlignment("center");
legend.yAlignment("center");
legend.renderTo("svg#legend_example");

<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"/>

<html>
  <body>
    <div class="component__svg">
          <svg width="100%" height="100%" id="example"></svg>
      
         <svg width="100%" height="100%" id="legend_example"></svg>
        </div>
      </body>
</html>

如果您执行代码，您可以看到图例没有出现。如何启用它并将其放在绘图的右上角？

javascript

html

css

plottable

回答 1

Stack Overflow用户

发布于 2015-09-26 06:28:22

任何基于Plottable的图表的核心都是基于表格的布局引擎。脚本中有两个组件: plot和legend。您可以使用Plottable.Components.Table并将表表示为组件数组的数组，如下所示

var chart = new Plottable.Components.Table([[plot, legend]]);

并将其呈现为一个svg元素

chart.renderTo("svg#example");

以下是您的代码的JSFiddle链接：http://jsfiddle.net/76j3wtoc/

票数 2

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

原文链接：

https://stackoverflow.com/questions/32757725

复制

相似问题

问如何在Plottable.js直方图中启用图例
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Plottable.js直方图中启用图例EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Plottable.js直方图中启用图例
EN