0

我有一个向下钻取的 HBar 图表。第一个图表的高度为 6.000，但向下钻取应该小得多，大约 400 像素，但我只能在同一画布上绘制第二个，高度相同。当我单击其中一个栏时，是否可以重新调整画布的尺寸？

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

1 回答 1

0

如果需要，您可以通过在创建新图表时设置装订线设置来重新调整画布的尺寸：

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 演示（您可以在此处获取：https ://www.rgraph.net/download.html#stable ）。

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

于 2014-01-20T10:13:39.063 回答