javascript - Fusion Tables javascript 图表不工作

标签 javascript html charts data-visualization fusioncharts

我是 javascript 新手,总体来说不太擅长编码。我一直在尝试使用从 Fusion Charts 获得的 JavaScript 代码来创建圆环图,但它不起作用。我尝试过在 html 中使用带有 src 的单独 .js 文件,并将 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();
});

最佳答案

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

<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/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();
});
</script>
</head>
<body>
 <div id="chart-container">FusionCharts will render here</div>
</body>
</html>

关于javascript - Fusion Tables javascript 图表不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34684780/

相关文章:

javascript - 使用 angularjs 从数据库检索记录后将 xml 转换为 json

c# - 字母数字密码的正则表达式,至少包含 1 个数字和字符

Javascript、倒数计时器和显示文本

javascript - 如何为一个文本框使用两个 on blur 事件?

jquery - jqPlot 仪表标签格式

javascript - 如何使用 JSON.parse() 的输出作为 HTML 图表数据字段的输入?

php - 他们说 HTML 中的 javascript 代码被认为是不好的做法,如何解决这个问题?

javascript - 文本输入内的可点击图标

html - flex 元素不起作用。我怎样才能修复我的代码来解决这个问题?

javascript - 向对象添加 Google Chart 功能