如何在amCharts5股票分析器中将Y轴渲染在左侧？

问题描述 #

我正在构建单只股票分析器，使用amCharts5库，希望将股票图表的Y轴渲染在左侧（默认位置）。尝试修改AxisRendererY的opposite属性为true但未生效，也没有报错。相关代码如下：

index.html 代码 #

<main>
  <div class="row">
    <div class="col-full" id="chartContainer">
      <div>Chart</div>
      <div id="stockChart"></div>
    </div>
 </div>
</main>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/stock.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
  <script type="module" src="js/main.js"></script>
  <script type="module" src="js/data.js"></script>
</body>
</html>

data.js 原代码 #

function getMatchingStockDailyPrices(matchingStock) {
    var xhrMatchingStockDailyPricesDataRequest = new XMLHttpRequest();
    xhrMatchingStockDailyPricesDataRequest.open('GET', `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY_ADJUSTED&symbol=${matchingStock}&apikey=XXXX`)
    xhrMatchingStockDailyPricesDataRequest.responseType = 'json';
    xhrMatchingStockDailyPricesDataRequest.addEventListener('load', function () {
        matchingStockResult = xhrMatchingStockDailyPricesDataRequest.response['Time Series (Daily)'];
        var matchingStockWeeklyPriceData = [];
        matchingStockWeeklyPriceData.push(matchingStockResult)
        var stockData = matchingStockWeeklyPriceData[0];
        for (var key in stockData) {
          data.push({Date: Date.parse(key), Value: Number.parseFloat(stockData[key]['4. close'])})
        }
        
        var root = am5.Root.new("stockChart");

          root.setThemes([
            am5themes_Animated.new(root)
          ]);

        var stockChart = root.container.children.push(am5stock.StockChart.new(root, {}));
          
        var mainPanel = stockChart.panels.push(am5stock.StockPanel.new(root, {
          wheelY: "zoomX",
          panX: true,
          panY: true,
          height: am5.percent(70)
        }));
      
        var valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
          renderer: am5xy.AxisRendererY.new(root, {
            pan: "zoom",
            opposite: true // 此处修改未生效
          }),
          tooltip: am5.Tooltip.new(root, {
            animationDuration:200
          }),
          numberFormat: "#,###.00",
          extraTooltipPrecision: 2
        }));
          
        var dateAxis = mainPanel.xAxes.push(am5xy.GaplessDateAxis.new(root, {
          baseInterval: {
            timeUnit: "day",
            count: 1
          },
          renderer: am5xy.AxisRendererX.new(root, {}),
          tooltip: am5.Tooltip.new(root, {
            animationDuration:200
          })
        }));
  
        var valueSeries = mainPanel.series.push(am5xy.LineSeries.new(root, {
            name: "STCK",
            valueXField: "Date",
            valueYField: "Value",
            xAxis: dateAxis,
            yAxis: valueAxis,
            legendValueText: "{valueY}"
          }));
          
        valueSeries.data.setAll(data);
    
        stockChart.set("stockSeries", valueSeries);

        mainPanel.set("cursor", am5xy.XYCursor.new(root, {
          yAxis: valueAxis,
          xAxis: dateAxis,
          snapToSeries: [valueSeries],
          snapToSeriesBy: "y!"
        }))
    });

    xhrMatchingStockDailyPricesDataRequest.send()
}

解决方案 #

问题根源是StockPanel的默认配置会强制Y轴显示在右侧，单独修改AxisRendererY的opposite属性会被StockPanel的配置覆盖。需要显式设置StockPanel的yAxisLayout属性为"rotate"，恢复Y轴的左侧默认布局。

修改后的关键代码 #

// 创建mainPanel时添加yAxisLayout配置
var mainPanel = stockChart.panels.push(am5stock.StockPanel.new(root, {
  wheelY: "zoomX",
  panX: true,
  panY: true,
  height: am5.percent(70),
  yAxisLayout: "rotate" // 强制Y轴显示在左侧
}));

// 调整AxisRendererY的opposite为false（或直接移除，默认值即为false）
var valueAxis = mainPanel.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {
    pan: "zoom",
    opposite: false
  }),
  tooltip: am5.Tooltip.new(root, {
    animationDuration:200
  }),
  numberFormat: "#,###.00",
  extraTooltipPrecision: 2
}));

说明 #

StockPanel默认会将yAxisLayout设置为"mirror"，导致Y轴显示在右侧。通过设置yAxisLayout: "rotate"，可以让Y轴回到左侧的默认位置，此时AxisRendererY的opposite属性会正常生效（false对应左侧，true对应右侧）。

内容的提问来源于stack exchange，提问作者Matthew Abebe