如何设置 AnyChart 烛台颜色动态？

Question

我想动态设置烛台颜色。但我不知道怎么做。

所以我将参数 true 如anychart Doc 所述传递给anychart.stock 构造函数并在带有映射字段的数据集上定义了一个字段颜色 如下所示。

有人得到解决方案吗？

参考 Dok：https://docs.anychart.com/Stock_Charts/Data#individual_point_settings

anychart.onDocumentReady(function() {

    // create a data table
    var table = anychart.data.table('x');
    // add data
    table.addData([{
        'x': '2015-12-24',
        'open': 511.53,
        'high': 514.98,
        'low': 505.79,
        'close': 506.40,
        'fill': '#00FF00'
    }]);

    // create a stock chart
    var chart = anychart.stock(true);

    // create a mapping
    var mapping = table.mapAs({
        'open': 'open',
        'high': 'high',
        'low': 'low',
        'close': 'close',
        'fill': 'fill'
    });

    // add a series using the mapping
    chart.plot(0).candlestick(mapping).name('ACME Corp.');

    // set container id for the chart
    chart.container('container');

    // initiate chart drawing
    chart.draw();
});

Answer 1

您的方法绝对正确！唯一的问题是烛台系列没有“填充”设置，它有上升填充和下降填充。因此，您只需使用这些设置对其进行映射。您可以在下面的评论中根据您的代码检查工作示例。此外，您可以在this article 中了解有关烛台设置的更多信息。

Answer 2

根据anychart的答案，代码变成了代码块中的样子。添加了一根额外的蜡烛，我希望看到一根绿色和一根红色的蜡烛。但只有红色蜡烛根据“fallingFill”正确显示。 “risingFill”未显示绿色蜡烛。

anychart.onDocumentReady(function() {

// create a data table
var table = anychart.data.table('x');
// add data
table.addData([{
    'x': '2015-12-24',
    'open': 511.53,
    'high': 514.98,
    'low': 505.79,
    'close': 506.40,
    'fallingFill': '#FF0000',
},
 {
    'x': '2015-12-25',
    'open': 521.53,
    'high': 524.98,
    'low': 515.79,
    'close': 524,    // 516.40, 
    'risingFill': '#00FF00'
}]);

// create a stock chart
var chart = anychart.stock(true);

// create a mapping
var mapping = table.mapAs({
    'open': 'open',
    'high': 'high',
    'low': 'low',
    'close': 'close',
    'risingFill': 'risingFill', 
    'fallingFill': 'fallingFill'
});

// add a series using the mapping
chart.plot(0).candlestick(mapping).name('ACME Corp.');

// set container id for the chart
chart.container('container');

// initiate chart drawing
chart.draw();
});