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

时间:2018-11-07 12:21:46

标签: javascript web candlestick-chart anychart

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

因此,我将对anychart Doc所述的参数true传递给anychart.stock 构造函数und在具有映射字段的数据集上定义了字段校正的颜色 如下所示。

有人得到解决方案吗?

引用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();
});

2 个答案:

答案 0 :(得分:1)

您的方法绝对正确!唯一的问题是烛台系列没有“填充”设置,它具有上升填充和下降填充。因此,您所需要做的就是使用这些设置进行映射。您可以根据以下注释中的代码检查工作示例。另外,您可以在this article中了解有关烛台设置的更多信息。

答案 1 :(得分:0)

根据 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();
});