在Amchart线图上显示interset的点

时间:2015-11-08 10:07:00

标签: amcharts

我使用amcharts的adjustBalloonText函数来显示给定日期的值。某些日期还会显示额外的文本(用于解释不规则值的注释)。

如果不将光标悬停在包含额外文本的特定日期上,则无法在线图上快速识别这些点。无论如何,我可以在图表上突出显示这些点(例如,更改图表上graph.bullets的形状或颜色)?

enter image description here

1 个答案:

答案 0 :(得分:0)

要单独修改每个项目符号的形状,请使用图形的bulletField属性。同样,要修改项目符号大小,请使用bulletSizeField。这样,您可以分别指定数据集子弹类型和大小中的哪个字段。

如果图表在数据点数据中找到此类字段,它将使用这些设置而不是默认图表的项目符号设置:bulletbulletSize

这是工作图表来说明:

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,
    "bullet": "diamond",
    "bulletSize": 25
  }, {
    "country": "India",
    "visits": 984
  }, {
    "country": "Spain",
    "visits": 711
  }, {
    "country": "Russia",
    "visits": 580
  }, {
    "country": "Canada",
    "visits": 441
  }, {
    "country": "Brazil",
    "visits": 395
  }],
  "graphs": [{
    "lineThickness": 2,
    "bullet": "round",
    "bulletSize": 9,
    "bulletField": "bullet",
    "bulletSizeField": "bulletSize",
    "valueField": "visits"
  }],
  "categoryField": "country"
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px;"></div>

目前无法更改单个项目符号的颜色,除非您想要通过其他一些解决方法,例如使用两个图表:一个是常规图形,另一个是显示突出显示的项目符号。

以下是针对以上解决方法的演示链接,以防万一:

http://codepen.io/team/amcharts/pen/08f94aac4f5d4c071850cd7ae0c758f9