amcharts Candlestick 自定义蜡烛的上下颜色

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

我被困在试图改变我的烛台的颜色上,我想要一个更深版本的绿色/红色,但以防万一我是色盲,我加入了灰色只是为了让它更引人注目。但我根本无法让它改变颜色。

我做了一个主题

class MyTheme extends am5.Theme {
            setupDefaultRules() {
                this.rule("Candlestick", ["custom-candlestick"]).setAll({
                    upColor: am5.color(0x777777), 
                    downColor: am5.color(0x00FF00),
                });                
                this.rule("Label").setAll({
                    fontSize: 10,
                    fill: am5.color(0x777777)
                });
            }
        }

然后尝试应用主题,但没有运气,有人有什么想法吗?

let valueSeries = mainPanel.series.push(am5xy.CandlestickSeries.new(root, {
            name: ticker,
            clustered: false,
            valueXField: "date",
            valueYField: "close",
            highValueYField: "high",
            lowValueYField: "low",
            openValueYField: "open",
            calculateAggregates: true,
            xAxis: dateAxis,
            yAxis: valueAxis,
            legendValueText: "open: [bold]{openValueY}[/] high: [bold]{highValueY}[/] low: [bold]{lowValueY}[/] close: [bold]{valueY}[/]",
            legendRangeValueText: "",
            tooltip: am5.Tooltip.new(root, {
                pointerOrientation: "horizontal",
                labelText: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}"
            }),
            themeTags: ["custom-candlestick"]
           
        }));
reactjs typescript amcharts
1个回答
0
投票

万一将来有人遇到同样的问题,我设法通过

using root.interfaceColors.set("positive", am5.color(0xff0000));
更改颜色这里是相关文档

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