标签: amcharts4

如何从amchart条形图中删除"js charts by amcharts"文本.有没有办法使用图表配置来做到这一点？请查看小提琴中的文字.

我想去掉图例中名称和百分比之间的空间。在图片中，我用黄色突出显示了空间。

例如，我希望第一个图例项是“立陶宛 (30.5%)”。“立陶宛”和“30.5%”之间的额外空间破坏了我的用户界面。

我的图例代码如下：

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
pieSeries.ticks.template.disabled = true;
pieSeries.labels.template.disabled = true;

// This creates initial animation
pieSeries.hiddenState.properties.opacity = 1;
pieSeries.hiddenState.properties.endAngle = -90;
pieSeries.hiddenState.properties.startAngle = -90;

pieSeries.legendSettings.labelText = '{category}';
pieSeries.legendSettings.valueText = null;
pieSeries.labels.template.text = "{category}: {value}";
pieSeries.slices.template.tooltipText = "{category}: {value}";

chart.legend = new am4charts.Legend();
chart.legend.fontSize = 5;
chart.legend.markers.template.width = 5;
chart.legend.markers.template.height = 5;

为了完成这项工作，我必须做出哪些改变？

我试图在Amcharts中设置滚动条颜色，但是Amcharts网站上指定的所有选项均无效。

我在反应应用程序中使用“ @ amcharts / amcharts4”：“ ^ 4.2.2”。

我尝试了很多下面提到的选项。他们都没有工作。

chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.fill = "#017acd";
chart.scrollbarX.setFill(new am4core.color("#017acd"));
chart.scrollbarX.setStroke(new am4core.color("#017acd"));
chart.scrollbarX.stroke = "#017acd"; //this sets the border line color of 
scrollbar.

谢谢您的帮助。

在 React 中，我将一个对象的 URL 属性（特别是 amcharts chart bullet.url）（一个字符串）设置为 "../members/{member.name}" 它呈现没有问题。单击该链接可正确导航到该页面。但是，似乎所有以前加载的状态都需要重新加载。它是一个新的 React “会话”吗？

我尝试使用 Link 使用各种表达式设置属性。但似乎没有一个按预期编译。我发现的大多数文章都与 Link 或持久状态的基本用法有关。

以下工作呈现和导航，但所有状态都在新页面上消失了：

let series = chart.series.push(new am4charts.LineSeries());
let bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.url = "../Members/{member.name}";

我在想有一个我缺少的 React 概念或一种设置链接 URL 的简单方法。我想在不“重置”所有先前加载的状态的情况下进行导航。

我有一个多值 AmChart，我在其中发送动态值并按预期​​工作，但是当我动态发送值为百分比值的值时，它不需要对所有行单独使用 Y 轴。对于所有的线，只有一个 y 轴就足够了。

我能够禁用出现的 y 轴，并且我还创建了一个 y 轴（静态 y 轴），但它与一系列图表不同步。

trend() {
    this._chart = am4core.create( "trend_yield", am4charts.XYChart );
    this._chart.data = this._TChart;
    this._chart.legend = new am4charts.Legend();

    this._selectedItems.forEach( selectedItem => {
        if ( selectedItem.id != 1 && selectedItem.id != 2 ) {
            this.createAxisAndSeries();

            let valueAxis = this._chart.yAxes.push( new am4charts.ValueAxis() );

            let series = this._chart.series.push( new am4charts.LineSeries() );
            series.dataFields.valueY = selectedItem.itemName;
            series.dataFields.dateX = "date";
            series.tensionX = 0.8;
            series.strokeWidth = 2;
            series.strokeOpacity = 5;
         //   series.yAxis = valueAxis;
            series.name = selectedItem.itemName; …

因此，我有一个页面用于监视一堆网络元素。我在一页上有 16 个单独的图表，其中有 5 分钟的数据点。

我有一个 while 循环来构建像这样的 JavaScript。

        $script .= '<!-- Chart code -->

am4core.ready(function() {

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

// Create chart instance
var chart = am4core.create("'.$agcname.'", am4charts.XYChart);


// Add data
chart.data = ['.rtrim($oosdata,',').'];

// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var avgAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "oosmta";
series.dataFields.dateX …

是否可以限制 XY 图表中列的最大宽度？我在带有 Typescript 的 Angular 项目中使用 AmCharts4。

下图中：

• 左图：当我将多行数据发送到 XY 图表时会发生什么
• 中间图表：当我将一行数据发送到 XY 图表时。
• 右图：当我将一行数据发送到 XY 图表时，我希望发生什么

有没有办法防止第二个图表的单列扩展太多？如果它扩展就很好，但我希望能够以某种方式限制它。

也许类似？ categoryAxis.maxColumnWidth = 50

我在这里检查了文档： https: //www.amcharts.com/docs/v4/tutorials/managing-width-and-spacing-of-column-series/但没有看到任何内容。

我已经查看了 amcharts 版本 4 ( https://www.amcharts.com/javascript-charts/ )的文档，但似乎无法找到如何将 y 轴格式化为货币。有关于以其他方式格式化 y 轴的文档，但货币似乎不是其中之一。有谁知道如何或从哪里开始？

到目前为止，我有上面的图表，只需要知道如何或在哪里将 y 轴格式化为货币。当您将鼠标悬停在格式化为货币的行上时，我目前有标签，因为这相当简单。这是我创建轴的函数：

function createAxisAndSeries(field, name, opposite) {
          const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

          const series = chart.series.push(new am4charts.LineSeries());
          series.dataFields.valueY = field;
          series.dataFields.dateX = 'date';
          series.strokeWidth = 2;
          series.yAxis = valueAxis;
          series.name = name;
          series.tooltipText = '{name}: [bold]${valueY}[/]';
          series.tensionX = 0.8;

          const interfaceColors = new am4core.InterfaceColorSet();

          valueAxis.renderer.line.strokeOpacity = 1;
          valueAxis.renderer.line.strokeWidth = 2;
          valueAxis.renderer.line.stroke = series.stroke;
          valueAxis.renderer.labels.template.fill = series.stroke;
          valueAxis.renderer.opposite = opposite;
          valueAxis.renderer.grid.template.disabled = true;

          }

从这里找到图像

    import React, { Component } from 'react';
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";

    am4core.useTheme(am4themes_animated);

    class BubbleChart extends Component {
    componentDidMount() {
        let hide = document.querySelector("rect").width
        console.log(hide,"check")
        let chart = am4core.create("bubbleChart", am4charts.XYChart);

        let valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
        valueAxisX.renderer.ticks.template.disabled = true;
        valueAxisX.renderer.axisFills.template.disabled = true;

        let valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxisY.renderer.ticks.template.disabled = true;
        valueAxisY.renderer.axisFills.template.disabled = true;

        let series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.valueX = "x";
        series.dataFields.valueY = "y";
        series.dataFields.value = "value";
        series.strokeOpacity = …

当尝试在 NextJS 项目中使用'@amcharts/amcharts4/core'包和其他 amchart 模块时，我收到错误：

SyntaxError: Unexpected token 'export'

在阅读了大量有关它的帖子和信息后，我发现这个问题非常有帮助，这使我能够找到动态导入的解决方案，我将在下面分享我如何解决它的解决方案。

https://github.com/amcharts/amcharts4/issues/272