AMcharts stockchart 2 时间序列在 y 轴上

Question

我正在制作带有标记的 AMcharts 股票图表。我做标记的方法是仅在满足条件时才取价格序列的值。因此数据有 4 列：

日期
SPY 价格（SP500 etf）
每日 RSI 立场 1（1,0 布尔值）
信号（如果每日 RSI 立场 1 = 1，SPY 价格，否则为空）

在此处找到数据的 CSV：

http://quantresearch.club/wp-content/themes/oceanwp/testing/RSI1dip.csv

问题是，即使数据完全对齐，它也不会在 amcharts 图表上以这种方式显示，这让我完全难住了。标记即。 “4. Signal”出现在“2. SPY price”时间序列下。如图所示：

最后是代码：

第一部分包含在下面较大的代码中，这就是两个时间序列出现的原因。

 "panels": [ {    
      "stockGraphs": [ {
        "id": "g1",
        "title": "SPY Price",
        "valueField": "spy",
        //"type": "line",
        "lineColor": "#39fe90",
        "useDataSetColors": false
     },{
        "id": "g2",
        "title": "Signal",
        "valueField": "Signal",
        "bulletSize": 10,
        "bullet": "round",
        //"bulletBorderAlpha": 1,
        "lineColor": "#551A8B",
        "useDataSetColors": false
AmCharts.loadFile(  "http://quantresearch.club/wp-content/themes/oceanwp/testing/RSI1dip.csv", {}, function( response ) {
  var csvData = AmCharts.parseCSV( response, {
    "useColumnNames": true
  });
  //var csvDataLength = csvData.length;
  chartData = [];
  guideData = [];
  //var a = 0;
  //var b = 0;
  //var c;
  var lastdate;
  var firstdate;
  $.each(csvData, function(i,k){
      if(k.Date != undefined) {
        chartData.push( {
          "Date": k.Date,
          "SPY": k.SPY,
          "Signal": k.Signal
        })
      }
  });
  //console.log(guideData);
     chart = AmCharts.makeChart( "chartdiv", {
    "type": "stock",
    "theme": "light",
    "categoryAxesSettings": {
      "labelRotation" : 30, 
      "minPeriod": "DD",
      "axisAlpha" : 1,
      "gridAlpha": 0,
      //"dateFormats" : "MMM-YYYY",
    },
    "legend": {
      "useGraphSettings": true
    },
    "dataSets": [ {
      "fieldMappings": [{
        "fromField": "SPY",
        "toField": "spy"
      },
      {
        "fromField": "Signal",
        "toField": "Signal"
      }],

      "dataProvider": chartData,
      "categoryField": "Date",}],

   //Where the chart gets populated

    "panels": [ {    
      "stockGraphs": [ {
        "id": "g1",
        "title": "SPY Price",
        "valueField": "spy",
        //"type": "line",
        "lineColor": "#39fe90",
        "useDataSetColors": false
     },{
        "id": "g2",
        "title": "Signal",
        "valueField": "Signal",
        "bulletSize": 10,
        "bullet": "round",
        //"bulletBorderAlpha": 1,
        "lineColor": "#551A8B",
        "useDataSetColors": false
      }],

    "stockLegend": {
        //"periodValueTextComparing": "[[percents.value.close]]%",
        "periodValueTextRegular": "[[value.close]]",
        //"labelText" : "SPY",
        "combineLegend": true,
        "markerType" : "line"
      }
    }, ],

    "chartScrollbarSettings": {
      "graph": "g1",
      "usePeriod": "DD",
      "position": "bottom",
      "gridAlpha": 0
    },
    "chartCursorSettings": {
      "valueBalloonsEnabled": true,
      "fullWidth": true,
      "valueLineBalloonEnabled": true,
      "valueLineEnabled": true,
      "valueLineAlpha": 0.5
    },

    "periodSelector": {
      "inputFieldsEnabled" : true,
      "position": "top",
      "periods": [ {
          "period": "YYYY",
          "count": 2,
          "label": "2Y"
        }, {
          "period": "YYYY",
          "count": 5,
          "label": "5Y"
        },
        {
          "period": "YYYY",
          "count": 10,
          "label": "10Y"
        },
        {
          "period": "MAX",
          "label": "MAX",
          "selected": true,
        }
      ]
    },
    "valueAxesSettings": {
      "gridColor": "#555",
      "gridAlpha": 0,
      //"axisAlpha" : 1,
      "inside": false,
      "position": "right",
      "showLastLabel": true
    },

    "panelsSettings": {
      "usePrefixes": false,
      "marginRight" : 20,
      "marginBottom" : 10,
      "marginLeft" : 20,
      "marginTop" : 10
    },

    "export": {
      "enabled": true,
      "position": "top-left"
    }
  } );
  /*chart.addListener("init", function(event) { 
    console.log(event);
  });*/

});

如果有人对此有任何想法，我们将不胜感激。

非常感谢。

Answer 1

问题是由于您的 SPY 图表中的股票图表 data grouping functionality. The chart groups data to improve performance when there a lot of points visible, which impacts how the line is drawn as it is using points derived from its data grouping algorithm. By default it's using the "Close" value in the grouping to plot your points and changing the periodValue 会改变外观。由于您的 Signal 数据集相比之下点数要少得多，因此该图表只是绘制出该图表的原始值，无论您使用哪个 periodValue，这些值都与您分组的 SPY 图表的值不匹配。

使两个图表的值正确排列的唯一选择是通过在 categoryAxesSettings 中将 maxSeries 设置为 0 来禁用数据分组。如果你有很多点，这将影响性能。

这是您的 codepen 图表，其中 maxSeries 设置为 0。

AMcharts stockchart 2 时间序列在 y 轴上

AMcharts stockchart 2 timeseries on y axis

javascript

charts

amcharts