如何在 Plottable.js 中调整图表大小

Question

我正在使用 Plottable.js 在我的页面上绘制图表。我想在调整 window 大小时调整图表大小。

我尝试通过 css（以及 svg 宽度和高度属性）设置大小但没有成功。

这是我尝试通过 svg 属性进行设置的尝试：

$('#svgSample').attr('width', w);
$('#svgSample').attr('height', h);

这是我尝试通过 css 进行设置：

$('#svgSample').css({
    'width': w + 'px',
    'height': h + 'px'
});

有什么想法吗？

谢谢

Answer 1

使用 CSS 可以覆盖宽度，使用 CSS "important" 属性

例如：宽度：100%！重要；将此应用到您的 div 并尝试

Answer 2

我相信你需要做的就是在设置svg属性后调用Plot.redraw()

这是一个例子：

window.onload = function() {
    var data = [
        { x: 1, y: 1 },
        { x: 2, y: 1 },
        { x: 3, y: 2 },
        { x: 4, y: 3 },
        { x: 5, y: 5 },
        { x: 6, y: 8 }
    ];
    var xScale = new Plottable.Scales.Linear();
    var yScale = new Plottable.Scales.Linear();

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

    plot.renderTo("#chart");
    $('#chart').attr('width', 500);
    $('#chart').attr('height', 400);
    plot.redraw();
}

</style> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/palantir/plottable/develop/plottable.css"> <style type="text/css">
body { background-color: #AAA; }
svg { background-color: #FFF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<svg id="chart" width="100" height="100"></svg>

Answer 3

感谢 Zoe，我修改了我的代码以响应 windows 调整大小时的重绘。

var data = [
    { x: 1, y: 1 },
    { x: 2, y: 1 },
    { x: 3, y: 2 },
    { x: 4, y: 3 },
    { x: 5, y: 5 },
    { x: 6, y: 8 }
];
var xScale = new Plottable.Scales.Linear();
var yScale = new Plottable.Scales.Linear();
var xAxis = new Plottable.Axes.Category(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);

var chart = new Plottable.Components.Table([
    [yAxis, plotBar],
    [null, xAxis]
]);
chart.renderTo("svg#svgSample");

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

如您所见，我什至不需要担心在 css 中设置宽度和高度。我认为 Plottable 在调用 plot.redraw()!

时会处理它

谢谢佐伊！

如何在 Plottable.js 中调整图表大小

How to resize chart in Plottable.js

html

javascript

css

plottable