Question

在使用因使用而安装的Chart.min.js文件时，我在使Chart.js显示图表时遇到问题： npm install chart.js --save（但是，如果使用CDN提供的文件 - 将显示图表）

为了避免将路径放入我的代码，我将Chart.min.js文件从安装目录：./ node_modules / chart_js / directory / Cham.min.js复制到我的网页所在的目录。这是正确的文件要复制吗？无论如何，当我将应用程序重新加载到浏览器中时，我得到一个空白显示。根本没有错误消息。

但是，如果我改为使用CDN提供的文件：<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>

一切正常。图表完全显示。

这是HTML文件：

<html>
<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
    <script src="Chart.min.js" </script>

</head>
<body>


    <h1>Chart.js Sample</h1>

    <canvas id="countries" width="600" height="400"></canvas>
        <script>
        var pieData = [
            {
                value: 20,
                color:"#878BB6"
            },
            {
                value : 40,
                color : "#4ACAB4"
            },
            {
                value : 10,
                color : "#FF8153"
            },
            {
                value : 30,
                color : "#FFEA88"
            }
        ];
        // Get the context of the canvas element we want to select
        var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData);
    </script>
</body>
</html>

那么，我做错了什么？下载有问题吗？

感谢您的任何帮助！

我在Mac OS X 10.10.5上运行我使用Safari和FireFox浏览器试过这个，并且本地Chart.min.js文件的相同问题无效。

Answer 1

您最好使用latest syntax来创建图表，而不是旧图表。

另外，这是map.js文件所在的正确目录，当通过npm：

安装时

using System.Xml.Serialization;

public class Request
{    
    [XmlIgnore()]
    public RequestType request;

    public int RequestTypeValue
    {
      get 
      {
        return (int)request;
      } 
      set
      {
        request=(RequestType)value; 
      }
    }
}

public enum RequestType
{
    Booking = 1,
    Confirmation = 2,
    PreBooking = 4,
    PreBookingConfirmation = 5,
    BookingStatus = 6
}

以下是适用于Chrome，Firefox和Safari的完整代码：

./node_modules/chart.js/dist/Chart.min.js

Answer 2

我认为问题必然是脚本标记的不正确关闭。见下文。

<强>之前：

 <script src="Chart.min.js" </script>

<强>后：

 <script src="Chart.min.js"></script>

以下是一个包含本地Chart.min.js文件的演示供您参考！

JSFiddle Demo

使用本地Chart.js文件时，ChartJS不显示

2 个答案: