使用chart.js时不显示条形图

时间:2017-04-20 14:33:27

标签: asp.net bar-chart chart.js

我正在尝试使用chart.js显示条形图。

数据JSON位于另一个名为barchart.txt的文件中,我从我的函数中读取它。看起来数据格式不正确,因为当我在第一行功能上发出警报时,即使这样也不起作用。

barchart.txt和Default.aspx都位于同一位置。

  

barchart.txt

SelectionChange
  

Default.aspx的

Worksheet_FormatChange

2 个答案:

答案 0 :(得分:2)

问题仅在于您的 barchart.txt ,显然,这不是有效的 JSON 对象。正确的 JSON 对象看起来像{"key": "string"},您可以参考here了解有关 JSON 的更多信息。

另外,您应该将 barchart 文件的扩展名从 .txt 更改为 .json

因此, barchart.json 文件中的数据应如下所示......

{
    "labels": ["January", "February", "March", "April", "May", "June", "July"],
    "datasets": [{
        "label": "Dataset Testing",
        "backgroundColor": [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1,
        "data": [65, 59, 80, 81, 56, 55, 40]
    }]
}

答案 1 :(得分:1)

你的json无效。您可以在此处验证http://jsonlint.com/

{
"labels": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July"
],
"datasets": [
    {
        "label": "Dataset Testing",
        "backgroundColor": [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        "borderColor": [
            "rgba(255,99,132,1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        "borderWidth": 1,
        "data": [
            65,
            59,
            80,
            81,
            56,
            55,
            40
        ]
    }
]}

尝试使用上面的json