Размер плагина JQPlot

Question

Размер плагина JQPlot

0

В этом коде я использую плагин jqplot, который я взял с этого сайта http://www.jqplot.com/deploy/dist/examples/line-charts.html. Я хочу изменить размер высоты и ширины. Как это сделать?

Мой код:

<!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>

theChampion 05 дек. 2013, в 10:18

Источник

Теги:

javascript

jquery

plugins

2 ответа

1

Ширина и высота должны быть указаны для самого контейнера. Проверьте источник примера.

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

Vikram Deshmukh 05 дек. 2013, в 06:53

Ещё вопросы

bodi0 · Accepted Answer · 2013-12-05T05-53-00.000Z

Размер рисунка зависит от размеров контейнера DIV, просто измените CSS на ширину и высоту (вместо 600px и 250px).

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