Question

我有以下使用dimple.js绘制图表的代码：http://jsbin.com/zacus/17/ 当调整浏览器窗口的大小（或调整jsbin窗格的大小）时，我希望图表也调整大小以适合它的表格单元格父级。从示例中可以看出，这不会发生。我曾尝试编写一个事件处理程序来更改图表的宽度或重绘图表，但无济于事。

window.onresize= function redraw(){
  chart1.setBounds(70, 30, pTd.offsetWidth-150, 300);
  myLegend1.left = chart1.width + 100;
}

有关如何完成此任务的任何建议？

编辑：尝试了一下，让我看到以下代码，这似乎解决了我的问题。这是实现这一目标的最佳方式吗？

chart1.svg.attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 600 400");

Answer 1

我还没有尝试使用viewBox，所以如果它能够正常工作，那么这听起来不错。我使用setMargins作为图表的比例并在调整大小时调用chart.draw。这样做的好处是可以使用凹坑尺寸逻辑 - 例如当图表太小时旋转x轴标签。

以下是该网站的一个示例：

// Set up a standard chart
var myChart;
d3.tsv("/data/example_data.tsv", function (data) {
    myChart = new dimple.chart(svg, data);

    // Fix the margins
    myChart.setMargins("60px", "30px", "110px", "70px");

    // Continue to set up a standard chart
    myChart.addCategoryAxis("x", "Month").addOrderRule("Date");
    myChart.addMeasureAxis("y", "Unit Sales");
    myChart.addSeries("Channel", dimple.plot.bar);

    // Set the legend using negative values to set the co-ordinate from the right
    myChart.addLegend("-100px", "30px", "100px", "-70px");
    myChart.draw();
});

// Add a method to draw the chart on resize of the window
window.onresize = function () {
    // As of 1.1.0 the second parameter here allows you to draw
    // without reprocessing data.  This saves a lot on performance
    // when you know the data won't have changed.
    myChart.draw(0, true);
};

Here it is in action

窗口大小更改时，2dimple.js / d3.js自动大小图表

1 个答案: