jquery - jqPlot中如何定义图形的大小

Question

我正在使用 jqPlot 在页面上呈现图形。

我正在关注这个链接。 http://www.jqplot.com/tests/bar-charts.php

我给图表的数据点是动态的。所以有时图表的大小是不同的。有没有办法/或能够为 jqPlot 设置属性？

确切地说，问题是如何设置图形的高度和宽度，以便每次获得新数据时，图形的大小和标签的大小始终相同。jsFiddle 的一个例子可以帮助包括我自己在内的每个人。

Answer 1

height您可以通过配置and来修复大小width：

$.jqplot('chartdiv', [data],
{
    height: 400,
    width: 400,
    ...

您还需要将heightandwidth赋予目标 div：

<div id="chartdiv" style="height:500px; width:500px;"></div>

Answer 2

if you specify the height and width for div, then it has preference over the height and width specified inside the option for JqPlot.

Answer 3

试试这个：（它的内联CSS）......

<div id="chart1" style="height:400px;width:300px; "></div>

*div id ( chart1 ) 必须与 jqPlot JS 文件相同。

plot1 = $.jqplot("chart1 " , [数据]

您可以根据需要更改高度和宽度。

Answer 4

虽然其他答案是正确的，您可以指定周围 div 的高度和宽度，但最好在 CSS 中单独执行此操作（jqPlot 也允许）。你未来的自己会感谢你没有混乱和更好的可维护性。

HTML：

<div id="chartdiv"></div>

CSS：

#chartdiv {
    height: 400px;
    width: 300px;
}