angular - Amcharts 的自定义 CSS
问题描述
我正在使用 Amcharts 4 和 Angular 7。找不到任何资源来使用自定义 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>
这是文档以获取更多信息
推荐阅读
- apache-flink - 使用保存点完成应用程序时出错
- python - ElementTree 是否会生成自己的 nsmap 而 lxml.etree 不会?
- python - 尝试在 Rest Api 上运行 GET 函数以在 python 中提取数据时出现 403 错误
- python - 如何根据熊猫列中的值选择布尔运算符?
- html - HTML/CSS - 我的 div 没有粘性,我不知道为什么
- javascript - 如何在 md-table 的顶部和底部添加水平滚动条?
- node.js - 为什么我应该在 MongoDB 中使用 NodeJS 在会话案例中搜索用户?
- javascript - 如何防止将编码文本中的“%20”转换为空格?
- c++ - 当我尝试在 C++ 中实现深度优先搜索算法时读取访问冲突
- python-3.x - TensorFlow2:ResNet50 - ValueError