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>

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

4

1 回答 1

2

任何基于 Plottable 的图表的核心都是基于表格的布局引擎。您的脚本中有两个组件，情节和图例。您可以Plottable.Components.Table像这样使用和表示表作为组件数组的数组

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

并将其渲染到一个 svg 元素

chart.renderTo("svg#example");

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

于 2015-09-25T22:28:21.593 回答