使用highcharts-ng指令的Highcharts向下钻取功能无法正常工作

时间:2019-01-17 10:33:48

标签: highcharts drilldown

$scope.chartOptions = { [  
   {  
      "options":{  
         "chart":{  
            "plotBorderWidth":1,
            "events":{  

            },
            "zoomType":"xy",
            "type":"column"
         },
         "legend":{  
            "enabled":true,
            "floating":false,
            "align":"left",
            "maxHeight":60,
            "itemWidth":100
         },
         "plotOptions":{  
            "line":{  
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               },
               "series":{  
                  "color":"#FFFFFFF"
               }
            },
            "column":{  
               "colorByPoint":true,
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            },
            "area":{  
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            },
            "bar":{  
               "colorByPoint":true,
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            },
            "spline":{  
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            }
         },
         "exporting":{  
            "enabled":false
         },
         "yAxis":[  
            {  
               "labels":{  
                  "style":{  
                     "color":"#89A54E"
                  }
               },
               "title":{  
                  "text":"SUM(AccountCodeAlternateKey)",
                  "events":{  

                  }
               },
               "opposite":false,
               "showEmpty":false
            }
         ],
         "tooltip":{  
            "headerFormat":"<b>{point.key}</b><br/>",
            "pointFormat":"{series.name}: {point.y}<br/>"
         }
      },
      "title":{  
         "text":"test_drilldown_col"
      },
      "xAxis":{  
         "labels":{  
            "useHTML":true,
            "rotation":-90
         },
         "categories":[  
            "null",
            "Assets",
            "Balances",
            "Expenditures",
            "Flow",
            "Liabilities",
            "Revenue",
            "Statistical"
         ],
         "crosshair":true,
         "useHTML":true,
         "lineColor":"transparent",
         "tickLength":0,
         "title":{  
            "text":"AccountType",
            "events":{  

            }
         }
      },
      "yAxis":{  

      },
      "drilldown":{  
         "series":[  
            {  
               "id":"Assets",
               "data":[  
                  [  
                     "abc",
                     4
                  ],
                  [  
                     "xyz",
                     2
                  ]
               ]
            },
            {  
               "id":"Flow",
               "data":[  
                  [  
                     "Apples",
                     4
                  ],
                  [  
                     "Oranges",
                     2
                  ]
               ]
            },
            {  
               "id":"Balances",
               "data":[  
                  [  
                     "Toyota",
                     4
                  ],
                  [  
                     "Opel",
                     2
                  ]
               ]
            }
         ]
      },
      "plotOptions":{  
         "line":{  
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            },
            "series":{  
               "color":"#FFFFFFF"
            }
         },
         "column":{  
            "colorByPoint":true,
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         },
         "area":{  
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         },
         "bar":{  
            "colorByPoint":true,
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         },
         "spline":{  
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         }
      },
      "loading":false,
      "series":[  
         {  
            "name":"SUM(AccountCodeAlternateKey)",
            "data":[  
               {  
                  "name":"Assets",
                  "y":23867,
                  "drilldown":"Assets"
               },
               {  
                  "name":"Balances",
                  "y":28580,
                  "drilldown":"Balances"
               },
               {  
                  "name":"Flow",
                  "y":191730,
                  "drilldown":"Flow"
               }
            ],
            "color":"#E3E75B"
         }
      ]
   }
] }

这是我通过API响应动态生成的json,highcharts-ng.js中的更改已完成,以通过遵循Highcharts-ng with drilldown来支持深入分析     但是仍然无法进行向下钻取。     请提出仍需要进行哪些更改。

And my $scope.chartOptions have multiple charts data also

     占位符       

0 个答案:

没有答案