HTML 5 图表问题答案

【问题标题】：HTML 5 chart issueHTML 5 图表问题
【发布时间】：2015-05-14 14:19:03
【问题描述】：

我正在为我从这个视频中学到的网页绘制图表 https://youtu.be/qYkkyOzR9jc 我正在尝试向我的图表添加标签，但它不起作用并使我的图表出错这是我的 HTML 代码

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="JS/dx.chartjs.js"> </script>

<script type="text/javascript"  src="http://cdn3.devexpress.com/jslib/13.1.7/js/dx.chartjs.js"> </script>


<script type="text/javascript" src="JS/PieChart.js"></script>


</head>
<body>

    <div id="chartContainer" style="border: 1px solid red; "></div>

</body>
</html>

这是我的 JavaScript 代码

$(document).ready(function(){

    var dataSource = [
        { country: "Russia", area: 1707540},
        { country: "Canada", area: 998467},
        { country: "USA", area: 937261},
        { country: "China", area: 959696},
        { country: "Brazil", area: 854700},
        { country: "Australia", area: 768685},
        { country: "India", area: 328759},
        { country: "Others", area: 554545}
    ];

    $("#chartContainer").dxPieChart({
        dataSource: dataSource,
        series: {
            argumentField: "country",
            valueField: "area",
            label: {
                visible: true,
                connector: {visible: true}
            }

        }
    });

})

这是我没有标签的图表

这是我添加标签元素后的错误图表

【问题讨论】：

您是否在控制台中遇到任何错误？
是的。像这样的东西 t.formatHelper._formatNumberCore @ dx.chartjs.js:9
我认为你也需要globalize.js 库。此外，看起来 globalize、jquery 和 dx.chartjs 之间可能存在一些版本兼容性问题，因此您可能需要做一些摆弄才能获得正确的版本集。

标签： javascript jquery html charts devextreme

【解决方案1】：

正如 lispHK01 所注意到的，您错过了对 globalize 库的引用。您的 html 文件应如下所示。

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>

<script type="text/javascript"  src="http://cdn3.devexpress.com/jslib/13.1.7/js/dx.chartjs.js"> </script>


<script type="text/javascript" src="JS/PieChart.js"></script>


</head>
<body>

    <div id="chartContainer" style="border: 1px solid red; "></div>

</body>
</html>

【讨论】：