Fusion Tables javascript图表无效

时间:2016-01-08 19:38:06

标签: javascript html charts data-visualization fusioncharts

我是javascript的新手,并且在编码时并不擅长。我一直在尝试使用我从Fusion Charts获得的javascript代码来创建一个圆环图但它不起作用。我尝试在html中使用单独的.js文件和src,并将javascript代码放在html中的脚本标记中。 javascript没有显示在网页上。这可能非常简单。

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

(和我的javascript)

FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container',
    width: '450',
    height: '450',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Homicides by Weapon",
            "subCaption": "USA 2013",
            "numberPrefix": "",
            "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "use3DLighting": "0",
            "showShadow": "0",
            "enableSmartLabels": "0",
            "startingAngle": "310",
            "showLabels": "0",
            "showPercentValues": "1",
            "showLegend": "1",
            "legendShadow": "0",
            "legendBorderAlpha": "0",
            "defaultCenterLabel": "Total homicides: 11583",
            "centerLabel": "Homicides from $label: $value",
            "centerLabelBold": "1",
            "showTooltip": "0",
            "decimals": "0",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0"
        },
        "data": [
            {
                "label": "Firearms",
                "value": "8454"
            }, 
            {
                "label": "Knives or cutting instruments",
                "value": "1490"
            }, 
            {
                "label": "Personal Weapons (hands, fists, etc.)",
                "value": "687"
            },
            {
                "label": "Other",
                "value": "952"
            }


        ]
    }
}).render();
});

1 个答案:

答案 0 :(得分:1)

要渲染FusionCharts,您需要在head标签中添加FC库。 请尝试使用cdn link FC 3.10.1 Library 或者你可以使用下面的代码来渲染fusionchart

        <div class="row">
        <footer>
            <div class="col-md-4">
                <div class="widget-title">
                    <h3>About us</h3>
                </div>

                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum lacus in lacus dictum, vitae pulvinar sem tempor. Nulla rutrum, lectus eget pulvinar egestas, quam lacus luctus ante, eget facilisis magna leo ut ipsum. Aenean tempus lorem arcu, id dapibus elit aliquet et.</p>
                </div>
            </div>


            <div class="col-md-4">
                <div class="widget-title">
                    <h3>About us</h3>
                </div>

                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum lacus in lacus dictum, vitae pulvinar sem tempor. Nulla rutrum, lectus eget pulvinar egestas, quam lacus luctus ante, eget facilisis magna leo ut ipsum. Aenean tempus lorem arcu, id dapibus elit aliquet et.</p>
                </div>
            </div>


            <div class="col-md-4">
                <div class="widget-title">
                    <h3>Categories</h3>
                </div>

                <div class="widget-content">
                    <ul>
                        <li>Girl vs Girl</li>
                        <li>MMA</li>
                        <li>WWE</li>
                        <li>Street</li>
                        <li>Sparring</li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>