2017-02-12 11 views
0

Сначала я новичок в JS Я использую Amcharts для отображения некоторых значений датчиков. Сначала я написал это s'traight вперед, как в документации Amcharts.JavaScript-Amscharts categoryAxis parseDate

var chart = AmCharts.makeChart("chartdiv", { 
"type": "serial", 
"theme": "light", 
"marginRight": 40, 
"marginLeft": 200, 
"autoMarginOffset": 20, 
"mouseWheelZoomEnabled":true, 
"dataDateFormat": "YYYY-MM-DD-JJ:NN:SS", 
"valueAxes": [{ 
    "id": "v1", 
    "axisAlpha": 1, 
    "position": "left", 
    "ignoreAxisWidth":true, 
    "precision": 2, 
    "axisColor": PosColor1, 
}], 
"balloon": { 
    "borderThickness": 1, 
    "shadowAlpha": 0 
}, 

"graphs": [{ 
    "valueAxis": "v1", 
    "id": "Graph1", 
    "lineColor": PosColor1, 
    "negativeLineColor": NegColor1, 
    //"bullet": "round", 
    //"bulletBorderThickness": 1, 
    //"hideBulletsCount": 30, 
    "title": ChartValue1, 
    "valueField": ChartValue1, 
    //"fillAlphas": 0, 
    "balloonText": "<span style='font-size:22;'>[[Heizkurve]]</span>", 
    "balloonFunction": function(item, graph) { 
     var result = graph.balloonText; 
     for (var key in item.dataContext) { 
     if (item.dataContext.hasOwnProperty(key) && !isNaN(item.dataContext[key])) { 
      var formatted = AmCharts.formatNumber(item.dataContext[key], { 
      precision: chart.precision, 
      decimalSeparator: chart.decimalSeparator, 
      thousandsSeparator: chart.thousandsSeparator 
      }, 2); 
      result = result.replace("[[" + key + "]]", formatted); 
     } 
     } 
     return result; 
    } 
}], 

"chartScrollbar": { 
    "graph": "g1", 
    "oppositeAxis":false, 
    "offset":10, 
    "scrollbarHeight": 40, 
    "backgroundAlpha": 0, 
    "selectedBackgroundAlpha": 0.1, 
    "selectedBackgroundColor": "#888888", 
    "graphFillAlpha": 0, 
    "graphLineAlpha": 0.5, 
    "selectedGraphFillAlpha": 0, 
    "selectedGraphLineAlpha": 1, 
    "autoGridCount":true, 
    "color":"#AAAAAA" 
}, 
"chartCursor": { 
    //"pan": true, 
    //"valueLineEnabled": true, 
    //"valueLineBalloonEnabled": true, 
    "categoryBalloonDateFormat": "MMM DD JJ:NN", 
    "cursorAlpha":1, 
    "cursorColor":"#258cbb", 
    "limitToGraph":"g1", 
    "valueLineAlpha":0.2, 
    //"valueZoomable":true 
}, 

"categoryField": "date", 
"categoryAxis": { 
    "parseDates": true, 
    "minPeriod": "fff", 
    "dashLength": 1, 
    "minorGridEnabled": true 
}, 
"export": { 
    "enabled": true 
}, 
"dataLoader": { 
    "url": file, 
    "format": "csv", 
    "showCurtain": true, 
    "showErrors": true, 
    "async": true, 
    "reload": 0, 
    //"timestamp": true, 
    "delimiter": ",", 
    "useColumnNames": true 
}, 
........; 

Теперь я попытался создать объект диаграммы на основе, потому что я хочу динамически обновлять его с помощью разных данных. Но когда я добавил «categoryAxis.oarseDate = true», диаграмма не будет отображаться. Если я прокомментирую это, график будет нарисован, но ось X не будет отформатирована как дата, как раньше.

chart.dataProvider = chartData; 
chart.categoryField = "date"; 

chart.addListener("dataUpdated", zoomChart); 

var categoryAxis = chart.categoryAxis; 
categoryAxis.minPeriod="fff"; 
categoryAxis.parseDates = true; 

Использование того же .csv als источника данных. Просто загрузите его с помощью функции Amcharts «AmChartsLoadCSV»

function AmChartsLoadCSV(file,chart){ 
var newchart = new AmCharts.AmSerialChart(); 
     newchart = chart; 
AmCharts.loadFile(file, {}, function(data) { 
     var chartData = AmCharts.parseCSV(data, { 
     "delimiter": ",", 
     "useColumnNames": true, 
     "showCurtain": true, 
     "showErrors": true 

     }); 


     var chart1 = MakeChart(chartData); 
     AddGraphtoChart(chart1,6); 
     return chart1; 
    }); 
+0

Я вижу, что вы используете dataLoader, но вы также настройки DataProvider. Что находится в вашем var chartData? – Robbert

+0

Нет, я просто использую dataProvider. DataLoader использовался только в первой версии, я определил диаграмму «fix» в прямой строке (первый код snipsel) CharData происходит от отдельной функции -> Я добавил его в первый пост – Vertigo1206

ответ

0

решена!

согласно образцам и демокоду У меня было двойное определение для оси Date. Я определил общий DateFormat для диаграммы chart.dataDateFormat="YYYY-MM-DD-JJ:NN:SS";, потому что это было в документе Amcharts.

После удаления этого categoryAxis.parseDates = true; работает отлично