Question

我有一个可以向下钻取的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>

Answer 1

如果需要，可以在创建新图表时设置装订线设置来重新标注画布：

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)

或者，您可以使用工具提示来显示如下的新图表：

http://www.rgraph.net/demos/bar-pie-charts-tooltips.html

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

Rgraph redimension钻孔画布

1 个答案: