Question

我们多年来一直在我们的物联网/ SCADA软件Mango Automation中使用amCharts，并对此非常满意。

我需要在图表上使用注释。他们希望我们将图表和注释的数据保存到磁盘，以便其他用户可以登录并查看注释。我很想知道这是否可行？我看到的一个问题是，在注释模式下，没有清除注释就无法返回到普通视图模式。意思是我想在图表上使用鼠标悬停工具提示并同时查看注释。

Answer 1

@gerric是对的。工具提示和注释不能一起工作。

他们希望我们将图表和注释的数据保存到磁盘，以便其他用户可以登录并查看注释。我很想知道这是否可行？

对于这部分问题，请参阅代码段，其中包含如何获取和设置注释到图表的示例。理想情况下，图表应具有固定的尺寸，以便注释在重新使用时保持在相同的位置。

不幸的是，当您尝试使用代码段中的按钮时，由于我在sessionStorage中保存数据，您将收到错误消息。看看http://codepen.io/team/amcharts/pen/87180663e881a5dc909078b2c17301a5?editors=1010，看看它是否有效。请记住，您需要处于注释模式。

另请查看annotation API，了解有关getAnnotations和setAnnotations的信息。

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [ {
    "country": "USA",
    "visits": 2025
  }, {
    "country": "China",
    "visits": 1882
  }, {
    "country": "Japan",
    "visits": 1809
  }, {
    "country": "Germany",
    "visits": 1322
  }, {
    "country": "UK",
    "visits": 1122
  }, {
    "country": "France",
    "visits": 1114
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Netherlands",
    "visits": 665
  }, {
    "country": "Russia",
    "visits": 580
  }, {
    "country": "South Korea",
    "visits": 443
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  } ],
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20,
    "labelRotation": 45
  },
  "export": {
    "enabled": true
  }
} );

$('#copy-annotation-button').on('click', function () {

    var amExport = chart.AmExport;
    
    amExport.getAnnotations({}, function (data) {
      window.sessionStorage.setItem("annotation", JSON.stringify(data));
    });
  
});

$('#paste-annotation-button').on('click', function () {

    var amExport = chart.AmExport,
      data = JSON.parse(window.sessionStorage.getItem("annotation"));

    amExport.setAnnotations({
      data: data
    }, function () {
      // Do something
    });
});

#chartdiv {
	width: 700px;
	height: 300px;
	font-family: Arial;
}

<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script>

<button id="copy-annotation-button">Copy Annotation</button>
<button id="paste-annotation-button">Paste Annotation</button>

<div id="chartdiv"></div>

同时使用amChart Annotations和工具提示

1 个答案: