在AmChart图表上添加一个链接

时间:2017-03-17 13:08:46

标签: javascript html css charts amcharts

我想在图表的右上角添加一个链接。主要思想是让它像图表本身一样响应,因此每当图表容器调整大小时,它应始终显示在右上角。

如下截图所示。

enter image description here

我已设法使用amchart Label功能和使用自定义css类(不要忘记启用addClassNames属性以实现此类可能性)来实现它。

您可以通过此JSFiddle link找到的完整代码示例。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "addClassNames": true,
  "titles": [{ "text": "Chart title" }],
  "dataProvider": [... data should be here ],
  ...
  // a lot of unrelevant to question properties
  ...
  "allLabels": [{
    "id": "xx",   /// id which is used for css customization
    "text": "View data",
    "bold": true,
    "x": "90%",
    "y": "3%",
    "rotation": 0,
    "width": "100%",
    "size": 11,
    "align": "middle",
    "url": "http://google.com" 
  }]
});

.amcharts-label-xx {
  text-decoration: underline;  // make the text underline imitating the link
}

但我正在寻找更加原生和直截了当的方式来做到这一点。有吗?我不喜欢我使用的方法,因为有很多硬编码值(例如绝对位置)。可能通过使用titles and subtitles amchart组件可以实现吗?

欣赏任何想法。

0 个答案:

没有答案