Как включить легенду в гистограмме Plottable.js

У меня есть следующий скрипт. Это просто график гистограммы в данных данных.

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

Если вы выполните код, вы увидите, что легенда не появилась. Как я могу включить его и поместить в верхнем правом углу графика?

Источник

1 ответ

В основе любой диаграммы на основе Plottable лежит механизм компоновки на основе таблиц. В вашем сценарии есть два компонента: сюжет и легенда. Ты можешь использовать Plottable.Components.Table и представлять таблицы в виде массива массивов таких компонентов, как это

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

И сделать это одному элементу SVG

chart.renderTo("svg#example");

Вот ссылка JSFiddle вашего кода: http://jsfiddle.net/76j3wtoc/

Источник
Другие вопросы по тегам