尝试在amcharts中动态添加指南时出错

时间:2017-04-22 12:42:43

标签: javascript html dynamic charts amcharts

因此,每次我收到错误时,我都会遇到通过.addGuide(指南)动态插入指南(图表中的垂直/水平线)的问题:

index.html:99 Uncaught TypeError: 
chart.categoryAxis.addGuide is not a function

顺便说一句,这是一个测试文件,因为我在主项目中遇到了同样的错误。

我的测试代码:

<html>
<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title>-</title>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

</head>

<div id="chartdiv" style="width:100%;height:400px;background-color:white;"</div>

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>

<script>

var chart;
var chartData = [];

chartData.push( {
  "dienos": "2016-05-03",// x axis
  "rad": "0.11"  // y axis
} );

    chart =  AmCharts.makeChart("chartdiv", { // target div
 "type": "serial",
 "theme": "light",
 "marginRight": 40,
 "marginLeft": 40,
 "autoMarginOffset": 20,
 "mouseWheelZoomEnabled":true,
 "dataDateFormat": "YYYY-MM-DD",
 "valueAxes": [{
         "id": "v1",
         "axisAlpha": 0,
         "position": "left",
 "title":"usv/h",   // title of Y axis
         "ignoreAxisWidth":true
 }],
 "balloon": {
         "borderThickness": 1,
         "shadowAlpha": 0
 },
 "graphs": [{
         "id": "g1",
         "balloon":{
             "drop":false,
             "adjustBorderColor":false,
             "color":"#ffffff"
         },
         "bullet": "round",
         "bulletBorderAlpha": 1,
         "bulletColor": "#FFFFFF",
         "bulletSize": 5,
         "hideBulletsCount": 50,
         "lineThickness": 2,
         "title": "dienos",
         "useLineColorForBulletBorder": true,
         "valueField": "rad",   // name of value Y field
         "balloonText": "<span style='font-size:18px;'>[["+"rad"+"]]</span>"
 }],
 "chartScrollbar": {
         "graph": "g1",
         "oppositeAxis":false,
         "offset":30,
         "scrollbarHeight": 80,
         "backgroundAlpha": 0,
         "selectedBackgroundAlpha": 0.1,
         "selectedBackgroundColor": "#888888",
         "graphFillAlpha": 0,
         "graphLineAlpha": 0.5,
         "selectedGraphFillAlpha": 0,
         "selectedGraphLineAlpha": 1,
         "autoGridCount":true,
         "color":"#AAAAAA"
 },
 "chartCursor": {
         "pan": true,
         "valueLineEnabled": true,
         "valueLineBalloonEnabled": true,
         "cursorAlpha":1,
         "cursorColor":"#258cbb",
         "limitToGraph":"g1",
         "valueLineAlpha":0.2,
         "valueZoomable":true
 },
 "valueScrollbar":{
     "oppositeAxis":false,
     "offset":50,
     "scrollbarHeight":10
 },
 "categoryField": "dienos", // name of X axis
 "categoryAxis": {
 "title":"DIENOS",      // title of X axis
         "parseDates": true,
         "dashLength": 1,
         "minorGridEnabled": true
 },
 "dataProvider":chartData
});

var date      = "2016-05-03";
var guide     = new AmCharts.Guide();

// Change some settings
guide.label = date;
guide.position = "top";
guide.lineAlpha = 1;
guide.labelRotation = 90;
guide.lineColor = "#575e71";

guide.date = date;
chart.categoryAxis.addGuide(guide); // error on here, altough error is not on this line

chart.validateNow();

</script>


</body>
</html>

P.S在他们的网站上看这个例子: https://www.amcharts.com/kbase/add-and-remove-guides-dynamically/

似乎工作,而我的没有。

感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

所以我找到了原因: 谷歌地图API脚本是它的原因,它以某种方式搞砸了amcharts。

在Google Maps API脚本中,我试图创建一个包含多个标记的地图。

所以大家注意跨脚本错误! 花了我几个小时才找到原因。