Amcharts的自定义CSS

问题描述

我正在使用Amcharts 4和Angular7。找不到用于为工具提示使用自定义CSS的任何资源。浏览了amchart网站以及Stackoverflow中的问题，但没有类似的问题。有人知道吗？将不胜感激。我可以使用inlign样式，但是使用外部CSS可以使代码更简洁。

解决方法

下一步是下一步：

如果您在工具提示中需要复杂的信息-表格，图像，CSS 您可以考虑使用tooltipHTML。它接受任何有效的HTML，包括成熟的CSS，因此您可以在其中执行任何操作。

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv",am4charts.XYChart);

var data = [];
var value = 120;

var names = ["Raina","Demarcus","Carlo","Jacinda","Richie","Antony","Amada","Idalia","Janella","Marla","Curtis","Shellie","Meggan","Nathanael","Jannette","Tyrell","Sheena","Maranda","Briana","Rosa","Rosanne","Herman","Wayne","Shamika","Suk","Clair","Olivia","Hans","Glennie",];

for (var i = 0; i < names.length; i++) {
  value += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 5);
  data.push({ category: names[i],value: value });
}

chart.data = data;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 15;
categoryAxis.renderer.grid.template.location = 0.5;
categoryAxis.renderer.grid.template.strokeDasharray = "1,3";
categoryAxis.renderer.labels.template.rotation = -90;
categoryAxis.renderer.labels.template.horizontalCenter = "left";
categoryAxis.renderer.labels.template.location = 0.5;

categoryAxis.renderer.labels.template.adapter.add("dx",function(dx,target) {
    return -target.maxRight / 2;
})

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.ticks.template.disabled = true;
valueAxis.renderer.axisFills.template.disabled = true;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";
series.tooltipHTML = `<center><strong>YEAR 2020</strong></center>
<hr />
<table class="test_table">
<tr>
  <th align="left">Cars</th>
  <td>1</td>
</tr>
<tr>
  <th align="left">Motorcycles</th>
  <td>2</td>
</tr>
<tr>
  <th align="left">Bicycles</th>
  <td>3</td>
</tr>
</table>
<hr />`;
/*series.sequencedInterpolation = true;
series.fillOpacity = 0;
series.strokeOpacity = 1;
series.strokeDashArray = "1,3";
series.columns.template.width = 0.01;*/


var bullet = series.bullets.create(am4charts.CircleBullet);

chart.cursor = new am4charts.XYCursor();

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarY = new am4core.Scrollbar();

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

.test_table{
  color: red;
  
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

这里是doc，以获取更多信息

amcharts angular angular