标签: amcharts4

尝试为图表设置自定义颜色

我正在尝试向柱形图添加自定义颜色,因此每列都有不同的颜色。我有以下代码:

__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)

amcharts amcharts4

3
推荐指数
1
解决办法
4599
查看次数

AmChart V4:可点击的类别轴标签(堆积柱形图)

我使用 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)

javascript amcharts twig amcharts4

3
推荐指数
1
解决办法
1063
查看次数

自定义 Amcharts v4 工具提示边框颜色

我应用了这样的代码:

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)

但不知何故,工具提示未加载边框颜色。

javascript amcharts amcharts4

3
推荐指数
1
解决办法
2957
查看次数

Amchart 4:如何在条形图中单击条形/列时突出显示条形/列

我试图在 Amchart 4 中单击条形/列时突出显示条形/列。使用下面的代码,我获取当前单击的条形/列的值,但使用该column.isActive属性,条形/列不会突出显示。

\n

我找到了这个Amchart 官方文档链接,但它是关于单击轴标签的。我正在尝试实现相同的功能,但是单击条/列,而不是轴标签。

\n

这是代码实现:

\n
am4core.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)

javascript bar-chart amcharts4

3
推荐指数
1
解决办法
1178
查看次数

使用 amcharts4 编译 Angular 8 CLI 项目时出现问题

我将使用@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)

amcharts angular amcharts4 angular8

2
推荐指数
1
解决办法
1650
查看次数

更改 amCharts 中的网格线颜色

我正在尝试更改我正在使用的图形的网格线(和边框)颜色。我看过文档,但只找到了更改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)

javascript amcharts amcharts4

2
推荐指数
1
解决办法
2215
查看次数

如何禁用 amCharts4 上值轴(Y 轴)上的光标值

我使用了 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 轴(黑色背景)上的光标值消失。

javascript amcharts amcharts4

0
推荐指数
1
解决办法
1877
查看次数

如何在 amCharts 中禁用光标缩放?

我有一个使用 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)

javascript amcharts amcharts4

0
推荐指数
1
解决办法
1271
查看次数

标签 统计

amcharts4 ×8

amcharts ×7

javascript ×6

angular ×1

angular8 ×1

bar-chart ×1

twig ×1