我正在尝试向柱形图添加自定义颜色,因此每列都有不同的颜色。我有以下代码:
__this._chartColours = ['#2776BD', '#00A1D0','#00C195','#7ED321','#A8C600','#C9B600','#E3A600', '#F7941E', '#FC7149'];
__this._chart = am4core.create(__this._tileChartDiv[0], am4charts.XYChart);
if(result.chartDataMap != null)
{
var colorSet = new am4core.ColorSet();
var counter = 0;
$.each(result.chartDataMap, function(xAxis, yAxis)
{
__this._dataProvider.push({"category": xAxis, "column-1": yAxis});
__this._chart.colors.list.push(am4core.color(__this._chartColours[counter]));
});
__this._chart.data = __this._dataProvider;
__this._chart.padding(40, 40, 40, 40);
var categoryAxis = __this._chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 60;
categoryAxis.title.text = result.xAxisTitle;
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 120;
var valueAxis = __this._chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = result.yAxisTitle;
var series = __this._chart.series.push(new …Run Code Online (Sandbox Code Playgroud) 我使用 amchart 4 创建了一个XYChart,更准确地说是一个堆积柱形图,我想让列标签可点击。这是我所做的(用一点树枝):
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [
{
'CategoryAxis' : 'Column label 1',
{% for valueAxis in listValueAxes %}
'{{ valueAxis.name }}': {{ valueAxis.numericalValue }},
{% endfor %}
},{
'CategoryAxis' : 'Column label 2',
{% for valueAxis in listValueAxes %}
'{{ valueAxis.name }}': {{ valueAxis.numericalValue }},
{% endfor %}
}
];
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "CategoryAxis";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
var label = categoryAxis.renderer.labels.template;
function createSeries(field) …Run Code Online (Sandbox Code Playgroud) 我应用了这样的代码:
var series = chart.series.push(new am4charts.LineSeries());
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#fff");
series.tooltip.border.fill = am4core.color("#000");
series.tooltip.label.fill = am4core.color("#000");
series.tooltipText = "{date.formatDate('d MMM, yyyy')}: [bold]{value}";
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
Run Code Online (Sandbox Code Playgroud)
但不知何故,工具提示未加载边框颜色。
我试图在 Amchart 4 中单击条形/列时突出显示条形/列。使用下面的代码,我获取当前单击的条形/列的值,但使用该column.isActive属性,条形/列不会突出显示。
我找到了这个Amchart 官方文档链接,但它是关于单击轴标签的。我正在尝试实现相同的功能,但是单击条/列,而不是轴标签。
\n这是代码实现:
\nam4core.ready(function() {\n\n// Themes begin\nam4core.useTheme(am4themes_animated);\n// Themes end\n\n// Create chart instance\nvar chart = am4core.create("chartdiv", am4charts.XYChart);\n\n// Add data\nchart.data = [{\n "country": "USA",\n "visits": 2025\n}, {\n "country": "China",\n "visits": 1882\n}, {\n "country": "Japan",\n "visits": 1809\n}, {\n "country": "Germany",\n "visits": 1322\n}, {\n "country": "UK",\n "visits": 1122\n}];\n\n// Create axes\n\nvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\ncategoryAxis.dataFields.category = "country";\ncategoryAxis.renderer.grid.template.location = 0;\ncategoryAxis.renderer.minGridDistance = 30;\n\ncategoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {\n if (target.dataItem && target.dataItem.index & 2 == 2) {\n return …Run Code Online (Sandbox Code Playgroud) 我将使用@amcharts/amcharts4@4.3.5 的应用程序更新为 Angular 8,现在编译时遇到问题。
已将 amcharts 更新至 4.4.10 版。但问题依然存在。
ERROR in ./node_modules/@amcharts/amcharts4/.internal/core/export/Export.js 68:24
Module parse failed: Unexpected token (68:24)
You may need an appropriate loader to handle this file type.
| switch (_a.label) {
| case 0: return [4 /*yield*/, Promise.all([
> import(/* webpackChunkName: "pdfmake" */ "pdfmake/build/pdfmake.js"),
| import(/* webpackChunkName: "pdfmake" */ "../../pdfmake/vfs_fonts")
| ])];
Run Code Online (Sandbox Code Playgroud) 我正在尝试更改我正在使用的图形的网格线(和边框)颜色。我看过文档,但只找到了更改fill. 看不到任何有关实际线路的信息。
演示:
var chart = am4core.create("dataChart", am4charts.XYChart);
chart.data = [{
"xValue": "Q1",
"yValue": 3
}, {
"xValue": "Q2",
"yValue": 4
}, {
"xValue": "Q3",
"yValue": 7
}, {
"xValue": "Q4",
"yValue": 2
}, {
"xValue": "Q5",
"yValue": 9
}];
/* Create axes */
var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";
theXAxis.renderer.minGridDistance = 30;
/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;
/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries()); …Run Code Online (Sandbox Code Playgroud)我使用了 am4charts.XYCursor(),它在 Y 和 X 轴上显示光标值。我希望隐藏/禁用 Y 轴上显示的值。
chart.cursor.lineY.disabled = true;
Run Code Online (Sandbox Code Playgroud)
代码笔: https ://codepen.io/pthakkar/pen/rgLqYY
/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
/* Configure cursor lines */
chart.cursor.lineX.stroke = am4core.color("#8F3985");
chart.cursor.lineX.strokeWidth = 4;
chart.cursor.lineX.strokeOpacity = 0.2;
chart.cursor.lineX.strokeDasharray = "";
chart.cursor.lineY.disabled = true;
Run Code Online (Sandbox Code Playgroud)
我希望出现在 Y 轴(黑色背景)上的光标值消失。
我有一个使用 amCharts 创建函数图的小任务。
问题是我需要启用光标,但也需要禁用缩放,因此我可以将图形调整为背景图像。
文档说使用 禁用缩放chart.zoomEnabled = false;,但它似乎不起作用,我不知道我会遗漏什么。
谢谢!
<style>
.graphContainer {
width: 500px;
height: 500px;
}
</style>
<script src="node_modules/ng"></script>
<script> let targetGroup =2; </script>
<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/plugins/forceDirected.js"></script>
<script src="https://cdn.amcharts.com/lib/4/plugins/piechart.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div class = "graphContainer" id="divElasticidad"></div>
<script type="text/javascript">
let sensor = { "value": 85 };
let mostrarComoPorcentajes = true;
</script>
<script type="text/javascript">
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Check if use percent or full value
let ejeX = "X";
let …Run Code Online (Sandbox Code Playgroud)