Angularjs 链接无法与FusionCharts LinkedChart一起使用

Angularjs 链接无法与FusionCharts LinkedChart一起使用,angularjs,fusioncharts,Angularjs,Fusioncharts,我试图做一个简单的深入研究,将几个月分解为几个星期,我只是想让第一个专栏开始工作。我得到了要渲染的图表,但当我单击一月时,它不会转到链接的图表。2月和3月的外部链接有效,所以我猜这是JSON数据的问题 define(['app'], function (app) { app.register.controller('MilesovertimeController', [function () { var vm = this; vm.myDataSource ={

我试图做一个简单的深入研究,将几个月分解为几个星期,我只是想让第一个专栏开始工作。我得到了要渲染的图表,但当我单击一月时,它不会转到链接的图表。2月和3月的外部链接有效,所以我猜这是JSON数据的问题

define(['app'], function (app) {
app.register.controller('MilesovertimeController', [function () {
    var vm = this;

    vm.myDataSource ={
        "chart": {
            "caption": "Miles Over Time",
            "subCaption": "Track the miles you have run over your entire running career!",
            "xAxisName": "Time (Month)",
            "yAxisName": "Miles",
            "theme": "fint"
        },
        "data": [
            {
                "label": "January",
                "value": "10",
                "link": "newchart-json-Jan"
            },
            {
                "label": "February",
                "value": "20",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "March",
                "value": "5",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "April",
                "value": "55",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "May",
                "value": "40",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "June",
                "value": "110",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "July",
                "value": "75",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "August",
                "value": "90",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "September",
                "value": "10",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "October",
                "value": "45",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "November",
                "value": "30",
                "link": "n-http://fusioncharts.com"
            },
            {
                "label": "December",
                "value": "100",
                "link": "n-http://fusioncharts.com"
            }
        ],
        "linkeddata": [
            {
                "id": "Jan",
                "linkedchart": {
                    "chart": {
                        "caption": "Miles In January",
                        "subcaption": "This is what you did in January",
                        "xAxisName": "Weeks",
                        "yAxisName": "Miles"
                    },
                    "data": [
                        {
                            "label": "Week 1",
                            "value": "50"
                        },
                        {
                            "label": "Week 2",
                            "value": "25"
                        },
                        {
                            "label": "Week 3",
                            "value": "40"
                        },
                        {
                            "label": "Week 4",
                            "value": "10"
                        }
                    ]
                }
            }
        ]
    }

}]);
);
编辑:这就是我想要模仿的

重要编辑:单击“一月”栏时,出现以下错误:

Uncaught RuntimeException: #03091456 chartobject-2.render() Error >> Unable to find the container DOM element.

<div class="container" ng-controller="MilesovertimeController as vm">
<div fusionCharts
     width="1000"
     height="550"
     type="column2d"
     datasource="{{vm.myDataSource}}">
</div>
</div>
未捕获的运行时异常:#03091456 chartobject-2.render()错误>>找不到容器DOM元素。

为了进行深入研究,请确保指令具有id

var-app=angular.module('myApp',[“ng fusioncharts”]);
应用控制器('MileVertimeController',[功能(){
var vm=这个;
vm.myDataSource={
“图表”:{
“说明”:“随时间推移的英里数”,
“子选项”:“跟踪您在整个跑步生涯中跑过的英里数!”,
“XaxiName”:“时间(月)”,
“yAxisName”:“Miles”,
“主题”:“fint”
},
“数据”:[
{
“标签”:“一月”,
“价值”:“10”,
“链接”:“newchart json Jan”
},
{
“标签”:“二月”,
“价值”:“20”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“三月”,
“价值”:“5”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“四月”,
“价值”:“55”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“可能”,
“价值”:“40”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“六月”,
“值”:“110”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“七月”,
“值”:“75”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“八月”,
“价值”:“90”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“九月”,
“价值”:“10”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“十月”,
“值”:“45”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“11月”,
“值”:“30”,
“链接”:“n-http://fusioncharts.com"
},
{
“标签”:“十二月”,
“值”:“100”,
“链接”:“n-http://fusioncharts.com"
}
],
“linkeddata”:[
{
“id”:“Jan”,
“linkedchart”:{
“图表”:{
“说明”:“一月英里数”,
“子选项”:“这是你在一月份所做的”,
“XaxiName”:“周”,
“yAxisName”:“英里”
},
“数据”:[
{
“标签”:“第一周”,
“值”:“50”
},
{
“标签”:“第2周”,
“值”:“25”
},
{
“标签”:“第3周”,
“值”:“40”
},
{
“标签”:“第4周”,
“值”:“10”
}
]
}
}
]
}
}]);


实际上,您的json数据无效。键值必须是双引号
{“key”:“value”}
我认为在使用angularJS时,不需要将变量名(如“label”)作为字符串传递ashttp://www.fusioncharts.com/angularjs-charts/#/demos/ex1Into 给出的示例包含json数据。是的,但那是因为你不需要angularJS来使用fusioncharts。尽管如此,我已将JSON数据更新为有效,但仍然无法使链接正常工作。在给定的示例中,该关系与«linkeddata»有关。