2016-12-21 6 views
0

デフォルトでallを比較することはできますか?ページをリフレッシュすると1行しか表示されません。デフォルトではすべての行が表示され、ユーザーは非表示にすることができます。私は何とかこれを達成したいAmCharts.js - デフォルトの "compareto"をnoneの代わりにallに設定

enter image description here

この

がデフォルトの動作です

enter image description here

しかし、私は、グラフの設定に変更するかを把握することはできません。 (実際には私は「比較」する態度を必要とせず、複数の行を隠すことができるすべての価格のチャートを作成するだけです)。あなたは、デフォルトで比較/可視たい各データセットでtrueに

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

    generateChartData(); 

    function generateChartData() { 
     var google_chart_json = {{ google_chart|safe }}; 
     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", { 
     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]]" 
      } 
     }], 

     "chartScrollbarSettings": { 
      "graph": "g1" 
     }, 

     "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> 

答えて

1

セットcompared: -

これは、チャート({"web_name": [[[year,month...], price], [[year,month..], price],...}{{ google_chart|safe }}はJSONするための変数である)です。最初のデータセットは、このセットを持っている必要はありませんので、あなたは、プロパティを設定する前に、あなたのインデックス値をチェックしたいと思うか、そうでなければ2回表示されます:あなたの前の質問からのデータを使用して、以下の

$.each(lines, function (idx, name_line) { 
     var dict = { 
      'title': name_line[0], 
      "fieldMappings": [{ 
       "fromField": "value", 
       "toField": "value" 
      }], 
      "dataProvider": name_line[1], 
      "categoryField": "date" 
     }; 
     if (idx > 0) { 
      dict.compared = true; 
     } 
     dataSets.push(dict); 
    }); 

デモ。

var lines = []; 
 
    var dataSets = []; 
 

 
    generateChartData(); 
 

 
    function generateChartData() { 
 
     var google_chart_json = {"fotolab.sk": [[[2016, 12, 19, 20, 38], 338.36], [[2016, 12, 18, 20, 38], 341.82], [[2016, 12, 17, 20, 38], 382.92], [[2016, 12, 16, 20, 38], 384.24], [[2016, 12, 15, 20, 38], 393.16], [[2016, 12, 14, 20, 38], 319.6], [[2016, 12, 13, 20, 38], 329.64], [[2016, 12, 12, 20, 38], 300.1], [[2016, 12, 11, 20, 38], 324.66], [[2016, 12, 10, 20, 38], 377.9], [[2016, 12, 20, 18, 52], 359.0]], "hej.sk": [[[2016, 12, 19, 20, 38], 380.18], [[2016, 12, 18, 20, 38], 327.4], [[2016, 12, 17, 20, 38], 382.5], [[2016, 12, 16, 20, 38], 389.76], [[2016, 12, 15, 20, 38], 385.23], [[2016, 12, 14, 20, 38], 355.48], [[2016, 12, 13, 20, 38], 328.39], [[2016, 12, 12, 20, 38], 311.35], [[2016, 12, 11, 20, 38], 350.8], [[2016, 12, 10, 20, 38], 389.81], [[2016, 12, 20, 18, 52], 399.0]], "mall.sk": [[[2016, 12, 19, 20, 38], 341.9], [[2016, 12, 18, 20, 38], 319.2], [[2016, 12, 17, 20, 38], 360.81], [[2016, 12, 16, 20, 38], 315.76], [[2016, 12, 15, 20, 38], 347.37], [[2016, 12, 14, 20, 38], 353.97], [[2016, 12, 13, 20, 38], 300.64], [[2016, 12, 12, 20, 38], 302.87], [[2016, 12, 11, 20, 38], 308.8], [[2016, 12, 10, 20, 38], 351.25], [[2016, 12, 20, 18, 52], 399.0]], "shoppie.sk": [[[2016, 12, 19, 20, 38], 363.41], [[2016, 12, 18, 20, 38], 315.55], [[2016, 12, 17, 20, 38], 369.09], [[2016, 12, 16, 20, 38], 369.85], [[2016, 12, 15, 20, 38], 354.29], [[2016, 12, 14, 20, 38], 305.96], [[2016, 12, 13, 20, 38], 387.4], [[2016, 12, 12, 20, 38], 303.95], [[2016, 12, 11, 20, 38], 384.83], [[2016, 12, 10, 20, 38], 303.81], [[2016, 12, 20, 18, 52], 399.0]], "k24.sk": [[[2016, 12, 19, 20, 38], 329.87], [[2016, 12, 18, 20, 38], 349.04], [[2016, 12, 17, 20, 38], 317.51], [[2016, 12, 16, 20, 38], 386.28], [[2016, 12, 15, 20, 38], 371.44], [[2016, 12, 14, 20, 38], 321.24], [[2016, 12, 13, 20, 38], 391.55], [[2016, 12, 12, 20, 38], 372.62], [[2016, 12, 11, 20, 38], 383.1], [[2016, 12, 10, 20, 38], 337.88], [[2016, 12, 20, 18, 52], 310.58]], "ello24.com": [[[2016, 12, 19, 20, 38], 327.53], [[2016, 12, 18, 20, 38], 395.58], [[2016, 12, 17, 20, 38], 366.37], [[2016, 12, 16, 20, 38], 328.88], [[2016, 12, 15, 20, 38], 330.78], [[2016, 12, 14, 20, 38], 349.29], [[2016, 12, 13, 20, 38], 327.62], [[2016, 12, 12, 20, 38], 396.08], [[2016, 12, 11, 20, 38], 336.72], [[2016, 12, 10, 20, 38], 345.49], [[2016, 12, 20, 18, 52], 304.0]]}; 
 
     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 (idx, name_line) { 
 
      var dict = { 
 
       'title': name_line[0], 
 
       "fieldMappings": [{ 
 
        "fromField": "value", 
 
        "toField": "value" 
 
       }], 
 
       "dataProvider": name_line[1], 
 
       "categoryField": "date" 
 
      }; 
 
      if (idx > 0) { 
 
       dict.compared = true; 
 
      } 
 
      dataSets.push(dict); 
 
     }); 
 
    } 
 
    console.log(dataSets) 
 
    var chart = AmCharts.makeChart("chartdiv", { 
 
     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]]" 
 
      } 
 
     }], 
 

 
     "chartScrollbarSettings": { 
 
      "graph": "g1" 
 
     }, 
 

 
     "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";
#chartdiv { 
 
    width: 100%; 
 
    height: 400px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="//www.amcharts.com/lib/3/amstock.js"></script> 
 
<div id="chartdiv"></div>

関連する問題