gpt4 book ai didi

javascript - JQPlot 插件大小

转载 作者:行者123 更新时间:2023-11-28 20:08:08 25 4
gpt4 key购买 nike

在此代码中,我使用的是从该网站 http://www.jqplot.com/deploy/dist/examples/line-charts.html 获取的 jqplot 插件。 。我想要的是改变高度和宽度的大小。这个怎么做 ?

我的代码:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JQPlot</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
</head>
<body>
<div id="chart1" style="width:600px; height:250px;"></div>
<script type="text/javascript">
$(document).ready(function () {
var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];

var line2 = [['23-May-08', 323], ['20-Jun-08', 222], ['25-Jul-08', 123], ['22-Aug-08', 43],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 544],
['23-Jan-09', 654], ['20-Feb-09', 234], ['20-Mar-09', 543], ['24-Apr-09', 323]];

var plot1 = $.jqplot('chart1', [line1, line2], {
title: 'Data Point Highlighting',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b&nbsp;%#d'
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 300
},
cursor: {
show: false
}
});
});
</script>
</body>
</html>

最佳答案

绘制的图的大小取决于容器DIV的尺寸,只需更改CSS的宽度和高度(而不是600px和250px)。

<div id="chart1" style="width:600px; height:250px;"></div>

关于javascript - JQPlot 插件大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20394901/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com