y轴上的AMcharts stockchart 2时间序列

时间:2018-08-28 02:01:16

标签: javascript charts amcharts

我正在制作带有标记的AMcharts库存表。我做标记的方法是仅在满足条件的情况下获取价格序列的值。因此,数据有4列:

  1. 日期
  2. SPY价格(SP500 etf)
  3. 每日RSI姿态1(1,0布尔值)
  4. 信号(如果每日RSI姿态1 = 1,SPY价格,否则为空白)

CSV,其中包含数据:

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

问题在于,即使数据完全对齐,但在amcharts图表上却没有显示出这种方式,这使我完全感到困惑。标记即。在“ 2. SPY价格”时间序列下显示“ 4.信号”。如此处所示:

enter image description here

最后是代码:

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

 "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);
  });*/

});

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

非常感谢您。

1 个答案:

答案 0 :(得分:1)

该问题归因于股票图表的data grouping functionality。当有许多可见点时,图表会将数据分组以提高性能,这会影响使用根据其数据分组算法得出的点绘制线的方式。默认情况下,它使用分组中的"Close"值绘制点,更改SPY图中的periodValue会改变外观。由于您的信号数据集的比较点要少得多,因此无论您使用哪个periodValue,该图表都只会绘制该图的原始值,这些原始值与分组后的SPY图的值不匹配。

使两个图的值正确对齐的唯一方法是通过将categoryAxesSettings中的maxSeries设置为0来禁用数据分组。如果您有很多要点,这将影响性能。

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