使用jChartFX更改饼图比例

时间:2013-09-02 19:36:53

标签: javascript css css3pie jchartfx

如何更改图表比例相对于其父图表div的任何想法?

目前它看起来像这样

enter image description here

......它应该看起来像这样 enter image description here

可以在此处找到用作此示例基础的代码

http://support.softwarefx.com/jChartFX/article/2501235#27182674-0690-e211-84a5-0019b9e6b500


HTML

<!DOCTYPE html>
<html>
<head>
   <title>Customized Tooltips</title>
   <link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>
   <link rel="stylesheet" type="text/css" href="sample.css"/>

   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector3d.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
   <script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
   <script type="text/javascript" src="sample.js"></script>

</head>
<body>
    <div id="ChartDiv1" style="width:550px;height:400px;display:inline-block"></div>
</body>
</html>



  var chart1;

  function onLoadDoc() {
        chart1 = new cfx.Chart();
        chart1.setGallery(cfx.Gallery.Pie);
        chart1.getAnimations().getLoad().setEnabled(true);
        var pie = chart1.getGalleryAttributes();
        pie.setExplodingMode(cfx.ExplodingMode.First);

        chart1.getView3D().setEnabled(true);
        chart1.getLegendBox().setVisible(true);

        //...
    }

1 个答案:

答案 0 :(得分:0)

您可以使用保证金属性:

chart1.getPlotAreaMargin().setTop(0);
chart1.getPlotAreaMargin().setBottom(0);
chart1.getPlotAreaMargin().setRight(0);
chart1.getPlotAreaMargin().setLeft(0);