我怎样才能得到我的jquery可视化显示在我的网站上

How can I get my jquery visualization to display on my website

本文关键字：我的 可视化 jquery 显示 网站      更新时间：2023-09-26

我在jquery中创建了一个工作交互图形，但我无法在我的网站上显示该图形。我的代码需要编辑吗?还是我需要调用一个脚本?谢谢你的帮助。

网站上显示的代码:

<div id="chart-container"></div>

<!DOCTYPE html>
<html>
<body>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
  </style>

<script type='text/javascript'>//<![CDATA[ 
FusionCharts.ready(function() {
    var salesByState = new FusionCharts({
        type: 'usa',
        renderAt: 'chart-container',
        width: '900',
        height: '600',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "4-yr University Tuition Rates",
                "subcaption": "Percent Increase (2010/11 - 2014/15)",
                "entityFillHoverColor": "#cccccc",
                "numberScaleValue": "1,1000,1000",
                "numberScaleUnit": "%,%,%",
                "numberPrefix": "",
                "showLabels": "1",
                "theme": "fint"
            },
            "colorrange": {
                "minvalue": "0",
                "startlabel": "Low",
                "endlabel": "High",
                "code": "#e44a00",
                "gradient": "1",
                "color": [
                    {
                        "maxvalue": "30",
                        "displayvalue": "Average",
                        "code": "#f8bd19"
                    },
                    {
                        "maxvalue": "100",
                        "code": "#6baa01"
                    }
                ]
            },
            "data": [
                {
                    "id": "HI",
                    "value": "47"
                },
                {
                    "id": "DC",
                    "value": "2879"
                },
                {
                    "id": "MD",
                    "value": "920"
                },
                {
                    "id": "DE",
                    "value": "4607"
                },
                {
                    "id": "RI",
                    "value": "4890"
                },
                {
                    "id": "WA",
                    "value": "34927"
                },
                {
                    "id": "OR",
                    "value": "65798"
                },
                {
                    "id": "CA",
                    "value": "61861"
                },
                {
                    "id": "AK",
                    "value": "58911"
                },
                {
                    "id": "ID",
                    "value": "42662"
                },
                {
                    "id": "NV",
                    "value": "78041"
                },
                {
                    "id": "AZ",
                    "value": "41558"
                },
                {
                    "id": "MT",
                    "value": "62942"
                },
                {
                    "id": "WY",
                    "value": "78834"
                },
                {
                    "id": "UT",
                    "value": "50512"
                },
                {
                    "id": "CO",
                    "value": "73026"
                },
                {
                    "id": "NM",
                    "value": "78865"
                },
                {
                    "id": "ND",
                    "value": "50554"
                },
                {
                    "id": "SD",
                    "value": "35922"
                },
                {
                    "id": "NE",
                    "value": "43736"
                },
                {
                    "id": "KS",
                    "value": "32681"
                },
                {
                    "id": "OK",
                    "value": "79038"
                },
                {
                    "id": "TX",
                    "value": "75425"
                },
                {
                    "id": "MN",
                    "value": "43485"
                },
                {
                    "id": "IA",
                    "value": "46515"
                },
                {
                    "id": "MO",
                    "value": "63715"
                },
                {
                    "id": "AR",
                    "value": "34497"
                },
                {
                    "id": "LA",
                    "value": "70706"
                },
                {
                    "id": "WI",
                    "value": "42382"
                },
                {
                    "id": "IL",
                    "value": "73202"
                },
                {
                    "id": "KY",
                    "value": "79118"
                },
                {
                    "id": "TN",
                    "value": "44657"
                },
                {
                    "id": "MS",
                    "value": "66205"
                },
                {
                    "id": "AL",
                    "value": "75873"
                },
                {
                    "id": "GA",
                    "value": "76895"
                },
                {
                    "id": "MI",
                    "value": "67695"
                },
                {
                    "id": "IN",
                    "value": "33592"
                },
                {
                    "id": "OH",
                    "value": "32960"
                },
                {
                    "id": "PA",
                    "value": "54346"
                },
                {
                    "id": "NY",
                    "value": "42828"
                },
                {
                    "id": "VT",
                    "value": "77411"
                },
                {
                    "id": "NH",
                    "value": "51403"
                },
                {
                    "id": "ME",
                    "value": "64636"
                },
                {
                    "id": "MA",
                    "value": "51767"
                },
                {
                    "id": "CT",
                    "value": "57353"
                },
                {
                    "id": "NJ",
                    "value": "80788"
                },
                {
                    "id": "WV",
                    "value": "95890"
                },
                {
                    "id": "VA",
                    "value": "83140"
                },
                {
                    "id": "NC",
                    "value": "97344"
                },
                {
                    "id": "SC",
                    "value": "88234"
                },
                {
                    "id": "FL",
                    "value": "88234"
                }
            ]
        }
    }).render();
});

</script>

</body>
<body>
  <script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>

</body>

</html>

你的html代码根本不正确，所以修复它

放<div id="chart-container"></div>inside <body></body>

加载所有外部javascript

http://static.fusioncharts.com/code/latest/fusioncharts.js

http://static.fusioncharts.com/code/latest/fusioncharts.charts.js

http://static.fusioncharts.com/code/latest/fusioncharts.maps.js

http://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js

http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js

相关文章：