将圆角设置为图表融合渲染容器

Question

我有一张图表使用融合图表来渲染

我试图给它一个圆角以匹配我当前的主题。

这是我到目前为止所尝试的内容：

HTML

<div id="network-bw-usage-graph" class="r-panel"></div>

CSS

我已经尝试了

.r-panel{
  width: 100%;
  height: 100%;
  border-radius: 10px !important;
}

JS

<script type="text/javascript">

    var data = {
        "chart": {
            "caption": "VSE Bandwidth Utilization",
            "subCaption": "Downlink Vs. Uplink",
            "xAxisName": "Day",
            "yAxisName": "Bandwidth Utilization (GB)",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "baseFontColor": "#333333",
            "baseFont": "Helvetica Neue,Arial",
            "subcaptionFontBold": "0",
            "paletteColors": "#6baa01,#008ee4",
            "usePlotGradientColor": "0",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showPlotBorder": "0",
            "showValues": "0",
            "showShadow": "0",
            "showAlternateHGridColor": "0",
            "showCanvasBorder": "0",
            "showXAxisLine": "1",
            "xAxisLineThickness": "1",
            "xAxisLineColor": "#999999",
            "canvasBgColor": "#ffffff",
            "divlineAlpha": "100",
            "divlineColor": "#999999",
            "divlineThickness": "1",
            "divLineDashed": "1",
            "divLineDashLen": "1",
            "divLineGapLen": "1",
            "legendBorderAlpha": "0",
            "legendShadow": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
        },
        "categories": [
        {
            "category": [
            {
                "label": "Mon"
            },
            {
                "label": "Tue"
            },
            {
                "label": "Wed"
            },
            {
                "label": "Thu"
            },
            {
                "label": "Fri"
            },
            {
                "label": "Sat"
            },
            {
                "label": "Sun"
            }
            ]
        }
        ],
        "dataset": [
        {
            "seriesname": "Downlink",
            "data": [
            {
                "value": "45123"
            },
            {
                "value": "42233"
            },
            {
                "value": "44507"
            },
            {
                "value": "39110"
            },
            {
                "value": "44829"
            },
            {
                "value": "47503"
            },
            {
                "value": "40202"
            }
            ]
        },
        {
            "seriesname": "Uplink",
            "data": [
            {
                "value": "11400"
            },
            {
                "value": "12800"
            },
            {
                "value": "17800"
            },
            {
                "value": "10400"
            },
            {
                "value": "11800"
            },
            {
                "value": "13100"
            },
            {
                "value": "20800"
            }
            ]
        }
        ]
    };
    var graph = new FusionCharts({

        "type": "mssplinearea",
        // "type": "msline",
        "renderAt": "network-bw-usage-graph",
        "width": "100%",
        "dataFormat": "json",
        "dataSource": data

    });


    FusionCharts.ready(function() {
        graph.render();
    });
</script>

任何提示？

Answer 1

我在图表两侧显示按钮时遇到了类似的问题。我可以建议一个解决方法。您创建了一个container div并将chart-container div放入其中。然后将边框，背景颜色赋予父container div。比图表div增加px或percent几个高度和宽度。

<div class="container">
  <div id="chart-container">FusionCharts will render here</div>
</div>

CSS：

.container {
 width: 455px;
 height: 455px;
 border-radius: 10px;
 background-color: white;
}

我创造了一个小提琴：http://jsfiddle.net/adigas/6swLnbbq/2/