【问题标题】:XY amchart with text on yAxis not woky 轴上带有文本的 XY amchart 不起作用
【发布时间】:2022-01-03 14:03:51
【问题描述】:

我正在尝试绘制 Amchart 的 反转值轴

它打印错误“未正确定义系列“货币”的数据字段”。

我认为基于文本的 y 轴存在一些问题。

这是我的代码:

    
    function XYChart() {
      let myData = [
        {
          year: "2008",
          label: "COLOCATION",
        },
        // other objects
      ];
      useEffect(() => {
        am4core.useTheme(am4themes_animated);
        var chart = am4core.create("chartdiv", am4charts.XYChart);
        chart.data = myData;
        var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        xAxis.dataFields.category = "year";
        xAxis.renderer.opposite = false;

        var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
        yAxis.dataFields.category = "label";
        yAxis.renderer.inversed = false;
        yAxis.renderer.grid.template.disabled = true;
        yAxis.renderer.labels.template.disabled = true;
    
        var series1 = chart.series.push(new am4charts.LineSeries());
        series1.dataFields.valueY = "label";
        series1.dataFields.categoryX = "year";
        series1.name = "Currency";
        series1.strokeWidth = 3;
        series1.bullets.push(new am4charts.CircleBullet());
        series1.tooltipText = "{name} in {categoryX}: {valueY}";
        series1.legendSettings.valueText = "{valueY}";
        series1.visible = false;
    
        chart.cursor = new am4charts.XYCursor();
        chart.cursor.behavior = "zoomY";
    
        chart.legend = new am4charts.Legend();
      });
    
      return (
          <div id="XYChartDiv"></div>
      );
    }
    
    export default XYChart;

【问题讨论】:

    标签: reactjs ecmascript-6 amcharts


    【解决方案1】:

    对于双类别轴,您需要将系列数据字段设置为 categoryXcategoryY - 您的代码使用 valueY,它仅适用于值轴。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-02-08
      • 1970-01-01
      • 2018-07-19
      • 2022-01-06
      • 1970-01-01
      相关资源
      最近更新 更多