amcharts 的问题

Question

我正在使用 amcharts 库制作股票图表。这是我取得的成就

这就是我想要的

您可以比较两张图片，看看我有圆柱形和移动平均图（虚线），但我无法添加显示在原始图底部的尖峰。（粉色和橙色）。我不知道如何在股票图中添加这些尖峰。我的数据是动态的，所以我不能创建一个 js fiddle 但我可以在这里提供我的功能-

function load_stock_graph(graph_type, history, title, aggregate){
    // DEFINE CHART PLUGINS
    AmCharts.averageGraphs = 0;
    AmCharts.addMovingAverage = function (dataSet, panel, field, aggregate, col ,graph) {
        // update dataset
        var avgField = "avg"+AmCharts.averageGraphs;
        dataSet.fieldMappings.push({
            fromField: avgField,
            toField: avgField});

        // calculate moving average
        var fc = 0;
        var sum = 0;
        for (var i = 0; i < dataSet.dataProvider.length; i++) {
           // console.log(aggregate[i].ema_0008)
            var dp = dataSet.dataProvider[i];
            if (dp[field] !== undefined) {
                sum += dp[field];
                fc++;
                if (aggregate[i] !== undefined){
                    if(col == '08'){
                        dp[avgField] = aggregate[i].ema_0008;
                    }else if(col == '15'){
                        dp[avgField] = aggregate[i].ema_0015;
                    }else if(col == '20'){
                        dp[avgField] = aggregate[i].ema_0020;
                    }
                }
            }
        }

        // create a graph
        graph.valueField = avgField;
        panel.stockGraphs.push(graph);

        // increment average graph count
        AmCharts.averageGraphs++;
    }

    // CHART DATA
    var chartData = [];
        var chartData1 = [];

    generateChartData(history);

    function generateChartData(history) {
        var firstDate = new Date();
        firstDate.setHours(0, 0, 0, 0);
        firstDate.setDate(firstDate.getDate() - 2000);

        for (var i = 0; i < history.length; i++) {
            var date = new Date(history[i].date);

             var val = Math.round(Math.random() * (30) + 100);

            chartData[i] = ({
                date: date,
                open: history[i].open,
                close: history[i].close,
                high: history[i].high,
                low: history[i].low,
                volume: history[i].volume,
                value: val
            });



        }
    }



    // CHART CONFIG
    var chartConfig =  {
        type: "stock",
        pathToImages : "/static/img/amcharts/",

        dataSets: [{
            fieldMappings: [{
                fromField: "open",
                toField: "open"
            }, {
                fromField: "close",
                toField: "close"
            }, {
                fromField: "high",
                toField: "high"
            }, {
                fromField: "low",
                toField: "low"
            }, {
                fromField: "volume",
                toField: "volume"
            }, {
                fromField: "value",
                toField: "val"
            }],

            color: "#fff",
            dataProvider: chartData,
            title: title,
            categoryField: "date",
            compared: false,
        }, 
        {
            fieldMappings: [{
                fromField: "value",
                toField: "value"
            }],
            color: "#fff",
            dataProvider: chartData,
            title: title,
            categoryField: "date"
        },


        ],


        panels: [{
                title: "Value",
                percentHeight: 70,


                stockGraphs: [{type: graph_type,
                      id: "g1",
                      openField: "open",
                      closeField: "close",
                      highField: "high",
                      lowField: "low",
                      valueField: "close",
                      lineColor: "#fff",
                      fillColors: "#fff",
                      negativeLineColor: "#db4c3c",
                      negativeFillColors: "#db4c3c",
                      fillAlphas: 1,
                      comparedGraphLineThickness: 2,
                      columnWidth: 0.7,
                      useDataSetColors: false,
                      comparable: true,
                      compareField: "close",
                      showBalloon: false,
                      //proCandlesticks: true
                    } ],

                stockLegend: {
                    valueTextRegular: undefined,
                    periodValueTextComparing: "[[percents.value.close]]%"
                }
            },

            {
                title: "Volume",
                percentHeight: 40,
                marginTop: 1,
                columnWidth: 0.6,
                showCategoryAxis: false,
                valueAxes: [{
                    usePrefixes: true
                }],



                stockGraphs: [ {
                      valueField: "volume",
                      openField: "open",
                      type: "column",
                      showBalloon: false,
                      fillAlphas: 1,
                      lineColor: "#fff",
                      fillColors: "#fff",
                      negativeLineColor: "#db4c3c",
                      negativeFillColors: "#db4c3c",
                      useDataSetColors: false,
                    } ],

                stockLegend: {
                    markerType: "none",
                    markerSize: 0,
                    labelText: "",
                    periodValueTextRegular: "[[value.close]]"
                }
            }


        ],

        panelsSettings: {
          color: "#fff",
          plotAreaFillColors: "#333",
          plotAreaFillAlphas: 1,
          marginLeft: 60,
          marginTop: 5,
          marginBottom: 5
        },

        chartScrollbarSettings: {
            graph: "g1",
            graphType: "line",
            usePeriod: "WW",
            backgroundColor: "#333",
            graphFillColor: "#666",
            graphFillAlpha: 0.5,
            gridColor: "#555",
            gridAlpha: 1,
            selectedBackgroundColor: "#444",
            selectedGraphFillAlpha: 1
        },
        categoryAxesSettings: {
          equalSpacing: true,
          gridColor: "#555",
          gridAlpha: 1
        },

        valueAxesSettings: {
          gridColor: "#555",
          gridAlpha: 1,
          inside: false,
          showLastLabel: true
        },

        chartCursorSettings: {
            pan: true,
            valueLineEnabled:true,
            valueLineBalloonEnabled:true
        },

        legendSettings: {
          color: "#fff"
        },

        stockEventsSettings: {
          showAt: "high"
        },

        balloon: {
          textAlign: "left",
          offsetY: 10
        }, 

        periodSelector: {
            position: "bottom",

          periods: [ {
            period: "DD",
            count: 10,
            label: "10D"
          }, {
            period: "MM",
            count: 1,
            label: "1M"
          }, {
            period: "MM",
            count: 6,
            selected: true,
            label: "6M"
          }, {
            period: "YYYY",
            count: 1,
            label: "1Y"
          }, {
            period: "YYYY",
            count: 2,
            label: "2Y"
          }, {
            period: "YTD",
            label: "YTD"
          }, {
            period: "MAX",
            label: "MAX"
          } ]
        },
            "export": {
          "enabled": true,
          "backgroundColor": "#fff",
          "dataDateFormat": "YYYY-MM-DD"
        }
    }

    // ADD INDICATORS
    // ema_0008
    AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '08', {
        useDataSetColors: false,
        color: "#ccffcc",
        lineColor: "#F4F009",
        title: "aggregate ema 0008",
        dashLength: 3
    });
    // ema_0015
    AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '15',{
        useDataSetColors: false,
        color: "#ccffcc",
        lineColor: "#2C7F1D",
        title: "aggregate ema 0015",
        dashLength: 3
    });

    // ema_0020
    AmCharts.addMovingAverage(chartConfig.dataSets[0], chartConfig.panels[0], 'value',aggregate, '20',{
        useDataSetColors: false,
        color: "#ccffcc",
        lineColor: "#A109E8",
        title: "aggregate ema 0020",
        dashLength: 3
    });

    // Empty chart instance so that chart loaded via ajax can work correctly
    AmCharts.charts = [];

    // CREATE CHART
    var chart = AmCharts.makeChart("chartdiv", chartConfig);

}

Answer 1

听起来您只需要在单独的面板中添加另一个折线图。

操作方法如下：

1) 在您的数据中添加额外的字段。您目前有开盘价、最高价、最低价、收盘价。让我们再添加一个，比如说，"pink".

2) 更新数据集的 fieldMappings 属性，以适应变化：

   [{
      fromField: "open",
      toField: "open"
    }, {
      fromField: "close",
      toField: "close"
    }, {
      fromField: "high",
      toField: "high"
    }, {
      fromField: "low",
      toField: "low"
    }, {
      fromField: "volume",
      toField: "volume"
    }, {
      fromField: "value",
      toField: "val"
    }, {
      fromField: "pink",
      toField: "pink"
    }]

3) 添加额外的股票面板和将使用新添加的数据字段的图表：

  {
    percentHeight: 20,
    showCategoryAxis: false,
    stockGraphs: [{
      valueField: "pink",
      showBalloon: false,
      lineColor: "#fb02fe",
      lineThickness: 2,
      useDataSetColors: false
    }]
  }

如果您想将指标添加到某个现有面板，您只需在其 stockGraphs 数组中定义图表。即：

  {
    percentHeight: 20,
    showCategoryAxis: false,
    stockGraphs: [{
      valueField: "pink",
      showBalloon: false,
      lineColor: "#fb02fe",
      lineThickness: 2,
      useDataSetColors: false
    }, {
      valueField: "red",
      showBalloon: false,
      lineColor: "#cc0000",
      lineThickness: 2,
      useDataSetColors: false
    }]
  }

使用此过程可根据需要添加任意数量的指标。

这是一个工作演示（具有随机值）

http://codepen.io/amcharts/pen/938b09efeabca4596c0a2cdaea60a269

amcharts 的问题

Issues with amcharts

javascript

amcharts