amCharts是一个强大的JavaScript图表库,可用于创建各种类型的交互式图表,包括XY图表。下面是一个使用amCharts创建XY图表的示例,并添加工具提示和标记的代码:
首先,确保在HTML文件中引入amCharts库和主题样式表:
然后,创建一个包含XY图表的div元素:
接下来,使用JavaScript代码创建和配置XY图表:
// 创建XY图表实例
var chart = am4core.create("chartdiv", am4charts.XYChart);
// 配置图表数据
chart.data = [{
"country": "USA",
"visits": 3025
}, {
"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
}];
// 创建X轴
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.title.text = "国家";
// 创建Y轴
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "访问量";
// 创建柱状图系列
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "访问量";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fill = am4core.color("#888");
// 添加图表光标
chart.cursor = new am4charts.XYCursor();
// 添加图例
chart.legend = new am4charts.Legend();
以上代码创建了一个包含XY图表的div元素,并配置了一些示例数据。通过添加柱状图系列,我们可以在每个柱状图上显示工具提示。工具提示的文本可以使用series.columns.template.tooltipText属性进行自定义。
最后,我们可以将图表渲染到div元素中:
// 渲染图表
chart.render();
以上代码将创建一个带有工具提示和标记的amCharts XY图表。你可以根据自己的需求修改数据、样式和配置。