Как добавить горизонтальную линию по оси Y в Plottable.js

121
9

У меня есть следующий код запуска в JavaScript Plottable.js.


var data = [{ 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 xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var plot = new Plottable.Plots.Bar()
.addDataset(new Plottable.Dataset(data))
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.animated(true);

new Plottable.Components.Table([
[null, null],
[yAxis, plot],
[null, xAxis]
]).renderTo("svg#example");

window.addEventListener("resize", function() {
plot.redraw();
});


<!doctype html>
<html>
<head>

</head>

<body>

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

Как указано на изображении ниже, как я могу изменить свой код Javascript, чтобы он мог включать горизонтальную линию в y=2?


введите описание изображения здесь

спросил(а) 2016-08-02T07:38:00+03:00 4 года, 3 месяца назад
1
Решение
92

Вы можете использовать Plottable.Components.GuideLineLayer:


var data = [{ 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 xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axes.Numeric(yScale, "left");

var plot = new Plottable.Plots.Bar()
.addDataset(new Plottable.Dataset(data))
.x(function(d) { return d.x; }, xScale)
.y(function(d) { return d.y; }, yScale)
.animated(true);
var guideline = new Plottable.Components.GuideLineLayer("horizontal")
.scale(yScale);
guideline.value(2);

var plots = new Plottable.Components.Group([guideline, plot]);
new Plottable.Components.Table([
[null, null],
[yAxis, plots],
[null, xAxis]
]).renderTo("svg#example");

window.addEventListener("resize", function() {
plot.redraw();
});


<!doctype html>
<html>
<head>

</head>

<body>

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

ответил(а) 2016-08-22T17:05:00+03:00 4 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема