Amcharts 5 股票图表 - 如何根据数据中上传的位置字符串为蜡烛着色

问题描述 投票:0回答:1

尝试根据数据中包含的“inTrade”字符串为股票蜡烛着色。三种状态“长”、“短”、“无”。开始使用 Amcharts 5“股票图表比较价格”演示,该演示现在包含两个数据文件。一种是 5 天的历史数据(15 分钟蜡烛图),另一种是当前 15 分钟蜡烛图内每 10 秒上传一次的“实时”数据。

历史数据格式..

窗口[“直播_分钟”] = [ {日期:1680631200000,开盘:164.565,最高价:164.603,最低价:164.51,收盘价:164.598,inTrade:"空头"}, ... ]

实时数据文件格式 {"日期":1681318800000,"开盘":166.27,"最高价":166.364,"最低价":166.23,"收盘价":166.347,"inTrade":"做多"}

尝试禁用值相关着色并设置快速主题,但没有效果。

数据文件中的字符串格式正确...Note

我确实尝试过,并且能够使用 Amcharts 4 获得所需的结果,但是我使用了数值(即“1”代表长整型,-1 短整型,0 无)而不是字符串。

// AMCHARTS 4 程序

delete series.riseFromOpenState.properties.fill;
delete series.dropFromOpenState.properties.fill;
series.columns.template.adapter.add("fill", function(fill, target) {
  if (target.dataItem && (target.dataItem.customValue < 0)) {
    return am4core.color("#FF0000");
  }
  else
  if (target.dataItem && (target.dataItem.customValue > 0)) {
    return am4core.color("#0094FF");
  }
  else
  if (target.dataItem && (target.dataItem.customValue === 0)) {
    return am4core.color("#C6C6C6");
  }
});

我更愿意学习如何在 Amcharts 5 中执行此操作,任何帮助将不胜感激。

amcharts stock candlestick-chart amcharts5 candlesticks
1个回答
0
投票

对于 amCharts 5 你可以这样做

series.columns.template.adapters.add("fill", function(fill, target) {
  if (target.dataItem.get("valueY") < 1000) {
    return am5.color(0xff621f);
  }
  else {
    return fill;
  }
});

参见这里

© www.soinside.com 2019 - 2024. All rights reserved.