AM4Charts:如何在条形图(Angular 2+)的工具提示中显示图表-不使用jquery

时间:2020-09-16 10:23:13

标签: javascript angular charts tooltip amcharts4

实际上,我希望当有人将鼠标悬停在条形图的工具提示上时显示该图,但是在给定的某些情况下,下面列出了这些图: 例如:我将鼠标悬停在am4charts中实现的图表上,即版本4,将鼠标悬停在上面,我必须根据提供的数据查看饼图。 需求: *不允许使用jquery *可以使用角度2+ *仅限版本4,amcharts(v4) 欢迎任何帮助 预先感谢!

let chart = am4core.create("chartdiv", am4charts.XYChart);
this.chart = chart;
/* Add data */
chart.data = [{
  "year": "1994",
  "bicycles": 121
}, {
  "year": "1995",
  "bicycles": 146
}, {
  "year": "1996",
  "bicycles": 138
}, {
  "year": "1997",
  "bicycles": 127
}, {
  "year": "1998",
  "bicycles": 105
}, {
  "year": "1999",
  "bicycles": 109
}, {
  "year": "2000",
  "bicycles": 112
}, {
  "year": "2001",
  "bicycles": 101
}, {
  "year": "2002",
  "bicycles": 97
}, {
  "year": "2003",
  "bicycles": 93
}, {
  "year": "2004",
  "bicycles": 101
}, {
  "year": "2005",
  "bicycles": 87
}, {
  "year": "2006",
  "bicycles": 79
}, {
  "year": "2007",
  "bicycles": 81
}, {
  "year": "2008",
  "bicycles": 75
}, {
  "year": "2009",
  "bicycles": 88
}, {
  "year": "2010",
  "bicycles": 82
}, {
  "year": "2011",
  "bicycles": 87
}, {
  "year": "2012",
  "bicycles": 71
}];
chart.logo.height = -1500;
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";

/* Create value axis */
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

/* Create series */

let series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "bicycles";
series3.dataFields.categoryX = "year";
series3.name = "Bicycles";
series3.strokeWidth = 3;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());

// HTML in tooltip
series3.tooltipHTML = `<center><strong>YEAR {categoryX}</strong></center>
      <hr />
      <table>
      <tr>
        <th align="left">Cars</th>
        <td>{cars}</td>
      </tr>
      <tr>
        <th align="left">Motorcycles</th>
        <td>{motorcycles}</td>
      </tr>
      <tr>
        <th align="left">Bicycles</th>
        <td>{bicycles}</td>
      </tr>
      </table>
      <hr />`;
series3.tooltip.pointerOrientation = "vertical";

0 个答案:

没有答案