如何使用Google Chart API创建带移动平均线的OHLC图表

Question

我正在使用Google API创建图表，能够创建OHLC（蜡烛图）图表。但我想在上面添加移动平均线叠加。请问有人能指导我如何做吗？

提前感谢。

- user3592376

---

使用一个带有“线条”系列的ComboChart，用于移动平均值，以及一个带有OHLC系列的“烛台图”系列。 - asgallant

在这种情况下，我需要计算它并在创建OHLC时提供它。在Jfreecharts中，它会自行计算并显示在图表上。 - user3592376

Answer 1

这是如何在K线图中添加移动平均线的示例：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Low');
    data.addColumn('number', 'Open');
    data.addColumn('number', 'Close');
    data.addColumn('number', 'High');

    var low, open, close = 45, high;
    for (var i = 0; i < 30; i++) {
        open = close;
        close += ~~(Math.random() * 10) * Math.pow(-1, ~~(Math.random() * 2));
        high = Math.max(open, close) + ~~(Math.random() * 10);
        low = Math.min(open, close) - ~~(Math.random() * 10);
        data.addRow([new Date(2014, 0, i + 1), low, open, close, high]);
    }

    // use a DataView to calculate an x-day moving average
    var days = 5;
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2, 3, 4, {
        type: 'number',
        label: days + '-day Moving Average',
        calc: function (dt, row) {
            // calculate average of closing value for last x days,
            // if we are x or more days into the data set
            if (row >= days - 1) {
                var total = 0;
                for (var i = 0; i < days; i++) {
                    total += dt.getValue(row - i, 3);
                }
                var avg = total / days;
                return {v: avg, f: avg.toFixed(2)};
            }
            else {
                // return null for < x days
                return null;
            }
        }
    }]);

    var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
    chart.draw(view, {
        height: 400,
        width: 600,
        chartArea: {
            left: '7%',
            width: '70%'
        },
        series: {
            0: {
                type: 'candlesticks'
            },
            1: {
                type: 'line'
            }
        }
    });
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});

点击链接查看效果：http://jsfiddle.net/asgallant/74u6ox8b/

- asgallant

---

我的情况有点不同，但你的例子对我帮助很大。 - RST