Javascript Rgraph重定尺寸向下展开画布

Javascript Rgraph重定尺寸向下展开画布,javascript,php,canvas,rgraph,Javascript,Php,Canvas,Rgraph,我有一个向下钻取的HBar图表。第一张图表的高度为6.000,但向下展开应该小得多,大约为400px,但我只能在相同的画布上绘制第二张图表,高度相同。单击其中一个栏时是否可以重新确定画布的尺寸 <canvas id="<?php echo $Geocanvas; ?>" width="900" height="6000" style="border: 1px solid #ddd">[No canvas support]</canvas> <scri

我有一个向下钻取的HBar图表。第一张图表的高度为6.000,但向下展开应该小得多,大约为400px,但我只能在相同的画布上绘制第二张图表,高度相同。单击其中一个栏时是否可以重新确定画布的尺寸

<canvas id="<?php echo $Geocanvas; ?>" width="900" height="6000" style="border: 1px solid #ddd">[No canvas support]</canvas>


<script>
    window.onload = function ()
    {
    var ca = document.getElementById("<?php echo $Geocanvas; ?>");
    var data = <?php echo $data; ?>;
    var labels =<?php echo $labels; ?>;
    var YMax =<?php echo $YMax; ?>;
    var Geocanvas =<?php echo $Geocanvas; ?>;

    var data_drilldown = [<?php echo implode(',', $data_drill) ?>];
    var labels_drilldown = [<?php echo implode(',', $labels_drill) ?>];

    var bar = DrawMainChart();

        /**
        * Draws the main chart
        */
        function DrawMainChart ()
        {
        RGraph.Reset(ca);

        var bar = new RGraph.HBar(Geocanvas, data)
            .Set('labels', labels)
            .Set('bevel', true)
            .Set('grouping', 'stacked')
            .Set('ymax', YMax)
            .Set('shadow', true)
            .Set('shadow.color', ['#3897c5'])
            .Set('shadow.offsety', 0)
            .Draw();
            bar.onclick = function (e, shape)
            {
                var obj = e.target.__object__;
                var ca  = obj.canvas;
                var idx = shape.index;

                /**
                * Slide the old bar out
                */
                RGraph.Effects.Fade.Out(obj, null, function ()
                {
                    RGraph.Reset(ca);

                    var bar = new RGraph.Bar(Geocanvas, data_drilldown[idx])
                        .Set('labels', labels_drilldown[idx])
            ;

                    RGraph.Effects.Fade.In(obj);
                });
            }

            /**
            * The onmousemove event to change the cursor
            */
            bar.onmousemove = function (e, shape)
            {
                e.target.style.cursor = 'pointer';
            }

            return bar;
        }

        document.getElementById("butBack").onclick = function (e)
        {
            var obj = ca.__object__;

            RGraph.Effects.Fade.Out(obj,null,function ()
            {
                var bar = DrawMainChart();

                RGraph.Effects.Fade.In(bar);
            });
        }
    }
</script>

如果需要,可以在创建新图表时通过设置边沟设置来重新调整画布的尺寸:

var bar = new RGraph.Bar(Geocanvas, data_drilldown[idx])
    .Set('labels', labels_drilldown[idx])
    .Set('gutter.left', 200)
    .Set('gutter.right', 50)
    .Set('gutter.top', 50)
    .Set('gutter.bottom', 50)
或者,您可以使用工具提示在下载档案中显示一个新图表,如bar-pie-charts-tooltips.html演示(您可以在此处获得:)

另一种方法是使用tooltips.override选项在显示工具提示时运行自己的代码。然后,您的代码可以创建一个新画布并显示新图表