如何定义jqPlot中图形的大小

Question

我正在使用jqPlot在页面上绘制图表。

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

我所提供给图表的数据点是动态的，因此有时候图表的大小会不同。是否有一种方法或能够设置jqPlot属性？

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

- VolleyBall Player

Answer 1

您可以通过配置height和width来调整尺寸：

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

您还需要给目标div指定height和width：

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

- zs2020

---

我可以设置高度，但宽度无法控制。 - VolleyBall Player

Answer 2

如果您为 div 指定了高度和宽度，则它将优先于 JqPlot 选项中指定的高度和宽度。

- Gyandeep

Answer 3

尝试这个：（它是内联CSS）...

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

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

plot1 = $.jqplot("chart1", [DATA]

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

- Ankit Pandey

Answer 4

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

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

CSS：

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

- majorobot