2016-12-21 38 views
0

AmCharts.jsの新機能です。私は、複数の値軸を持つチャートを作成して、datetime(時間ではなく、より良い分)(日付ではない)に従って、1つの製品の異なるWebサイトでの価格の発生を表します。複数の値軸と日付時刻

私はお互いに依存しない複数の線で図を描く必要があります。だから私が1つの値がnullの場合、2行目の値は引き続き引き出されます。

各製品の出現数が異なるため、色やデータセットの別のプロパティをハードコードできません。

私が見つけた最良のアプローチの1つはAmStockChartであるため、複数の行を描くことができます。しかし、複数の問題があります。そのうちの1つは、ある行を別の行と "比較"する必要があるため、datetime xxxの値がない場合、このdatetimeに対してline2の値は表示されません。

日時は異なります(1行は12.01 13:00、もう1つは14:00などです)。

これは、比較する必要があるため正しく機能しない私の解決策です。

JSONは次のとおりです。{'web_name':[[[year,month,day,hour...],price],[[[year,month....}

<script> 
    var lines = []; 
    var dataSets = []; 

    generateChartData(); 

    function generateChartData() { 
     var google_chart_json = JSON; 
     var loopcounter = -1; 
     $.each(google_chart_json, function (key, val) { 
      var line = []; 
      loopcounter = loopcounter + 1; 

      $.each(val, function (_, scan) { 
       var year = scan[0][0]; 
       var month = scan[0][1]; 
       var day = scan[0][2]; 
       var hour = scan[0][3]; 
       var minute = scan[0][4]; 
       var price = scan[1]; 

       var data = { 
        'date': new Date(year, month - 1, day, hour, minute), 
        'value': price 
       }; 
       line.push(data); 
      }); 
      line.sort(function (lhs, rhs) { 
       return lhs.date.getTime() - rhs.date.getTime(); 
      }); 

      lines.push([key, line]); 
     }); 
     console.log('LINES'); 
     console.log(lines); 


     $.each(lines, function (_, name_line) { 
      var dict = { 
       'title': name_line[0], 
       "fieldMappings": [{ 
        "fromField": "value", 
        "toField": "value" 
       }], 
       "dataProvider": name_line[1], 
       "categoryField": "date" 
      }; 
      dataSets.push(dict); 
     }); 
    } 
    console.log(dataSets) 
    var chart = AmCharts.makeChart("chartdiv", { 
     "allLabels": [ 
      { 
       "text": "Free label", 
       "bold": true, 
       "x": 20, 
       "y": 20 
      } 
     ], 
     categoryAxesSettings: { 
      minPeriod: "hh",//(at least that is not grouped) 
      groupToPeriods: ["DD", "WW", "MM"]//(Data will be grouped by day,week and month) 
     }, 
     "type": "stock", 
     "theme": "light", 
     "dataSets": dataSets, 

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

      "stockGraphs": [{ 
       "id": "g1", 
       "valueField": "value", 
       "comparable": true, 
       "compareField": "value", 
       "balloonText": "[[date]][[title]]:<b>[[value]]</b>", 
       "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>" 
      }], 
      "stockLegend": { 
       "periodValueTextComparing": "[[percents.value.close]]%", 
       "periodValueTextRegular": "[[value.close]]" 
      } 
     }], 

     {#https://docs.amcharts.com/javascriptcharts/ChartScrollbar#} 
     "chartScrollbarSettings": { 
      "graph": "g1", 
      "color": "#333333" 
     }, 

     "chartCursorSettings": { 
      "valueBalloonsEnabled": true, 
      "fullWidth": true, 
      "cursorAlpha": 0.1, 
      "valueLineBalloonEnabled": true, 
      "valueLineEnabled": true, 
      "valueLineAlpha": 0.5 
     }, 

     "periodSelector": { 
      "position": "left", 
      "periods": [{ 
       "period": "MM", 
       "selected": true, 
       "count": 1, 
       "label": "1 month" 
      }, { 
       "period": "YYYY", 
       "count": 1, 
       "label": "1 year" 
      }, { 
       "period": "YTD", 
       "label": "YTD" 
      }, { 
       "period": "MAX", 
       "label": "MAX" 
      }] 
     }, 

     "dataSetSelector": { 
      "position": "left", 
     }, 

     "export": { 
      "enabled": true 
     } 
    }); 
    chart.panelsSettings.recalculateToPercents = "never"; 
</script> 

私は値を同じ日付時刻を入れると、それはラインを示しています。しかし、それぞれの値が異なる日時を持っているとき、それは最初の行を除いては何も示していますそれらの異なる数があるので

enter image description here

別の解決策(Line chart FiddleJS)は私が行うことができないラインをハードコードしています。しかし、主な問題は、彼ら自身の価値観の軸があることです。

複数の折れ線グラフと異なる値と行の異なる日付時刻を比較しないようにするために、コード内で何をすべきか教えてください。または、もしあなたが知っていれば、このすべてを行うことができるいくつかのタイプのアンチャートをお勧めしますか?

答えて

1

比較するには、気づいたとおり、すべての日付/時刻が一致する必要があるか、すべての点が表示されないことが必要です。 AmCharts知識ベースでは、チャートを初期化する前に、あなたのデータにタイムスタンプを同期ミニプラグインを実装しdemoがあります:

/** 
* amCharts plugin: sync timestamps of the data sets 
* --------------- 
* Will work only if syncDataTimestamps is set to true in chart config 
*/ 
AmCharts.addInitHandler(function(chart) { 

    // check if plugin is enabled 
    if (chart.syncDataTimestamps !== true) 
    return; 

    // go thorugh all data sets and collect all the different timestamps 
    var dates = {}; 
    for (var i = 0; i < chart.dataSets.length; i++) { 
    var ds = chart.dataSets[i]; 
    for (var x = 0; x < ds.dataProvider.length; x++) { 
     var date = ds.dataProvider[x][ds.categoryField]; 
     if (dates[date.getTime()] === undefined) 
     dates[date.getTime()] = {}; 
     dates[date.getTime()][i] = ds.dataProvider[x]; 
    } 
    } 

    // iterate through data sets again and fill in the blanks 
    for (var i = 0; i < chart.dataSets.length; i++) { 
    var ds = chart.dataSets[i]; 
    var dp = []; 
    for (var ts in dates) { 
     if (!dates.hasOwnProperty(ts)) 
     continue; 
     var row = dates[ts]; 
     if (row[i] === undefined) { 
     row[i] = {}; 
     var d = new Date(); 
     d.setTime(ts); 
     row[i][ds.categoryField] = d; 
     } 
     dp.push(row[i]); 
    } 
    dp.sort(function(a,b){ 
     return new Date(a[ds.categoryField]) - new Date(b[ds.categoryField]); 
    }); 
    ds.dataProvider = dp; 
    } 

}, ["stock"]); 

ちょうどあなたのチャートのコードの前にこれを追加し、trueにカスタムsyncDataTimestampsプロパティを設定しますあなたのチャート設定のトップレベルにあり、初期化時に実行されます。