我正在尝试进行一个简单的深入分析，将几个月分解为几周，并且只是想让第一栏发挥作用。我获取要渲染的图表，但是当我单击“一月”时，它不会转到链接的图表。 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"
}
]
}
}
]
}
}]);
);
编辑:这就是我试图模仿 http://www.fusioncharts.com/features/linkedcharts-for-drill-down/
重要编辑:当我单击一月栏时，我收到此错误:
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>
最佳答案
为了进行深入研究，请确保指令具有 id
var app = angular.module('myApp', ["ng-fusioncharts"]);
app.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"
}
]
}
}
]
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="MilesovertimeController as vm">
<div fusionCharts
width="1000"
height="550"
id="test"
type="column2d"
datasource="{{vm.myDataSource}}">
</div>
</div>
</div>关于angularjs - 链接无法与 FusionCharts 一起使用 LinkedChart，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33503013/