Amchart Streudiagramm mit Zeitreihendaten

Question

Ich versuche, ein Streudiagramm mit Amcharts Bibliothek zu plotten und meine Daten sind in Zeitreihen. Ich bin eine harte Zeit, es zu zeichnen,

unten ist mein Javascript-Code für das, was ich versucht habe, so weit:

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "xy", 
"dataProvider": [{'nj6kJemGCxKx5dTxZ4dDNW': '95.025', 'lineColor': '#00ff00', 'x_axis_value': '0:10:06'}, {'nj6kJemGCxKx5dTxZ4dDNW': '94.067', 'lineColor': '#00ff00', 'x_axis_value': '0:10:07'}, {'nj6kJemGCxKx5dTxZ4dDNW': '98.055', 'lineColor': '#00ff00', 'x_axis_value': '0:10:08'}, {'nj6kJemGCxKx5dTxZ4dDNW': '97.136', 'lineColor': '#00ff00', 'x_axis_value': '0:10:09'}, {'nj6kJemGCxKx5dTxZ4dDNW': '97.136', 'lineColor': '#00ff00', 'x_axis_value': '0:10:10'}], 
    "valueAxes": [ { 
     "axisAlpha": 0, 
     "dashLength": 1, 
     "position": "left", 
     "title": "Y Axis" 
    }], 
    "dataDateFormat": "JJ:NN:SS", 
    "graphs": [{ 
     "balloonText": "x:[[x]] y:[[y]]", 
     "bullet": "triangleUp", 
     "lineAlpha": 0, 
     "xField": "x_axis_value", 
     "yField": "nj6kJemGCxKx5dTxZ4dDNW", 
     "lineColor": "#FF6600", 
     "fillAlphas": 0 
    }], 
} 
); 

hier ist JSFiddle: http://jsfiddle.net/Shivin15/o3kp2dqb/

Jeder Vorschlag auf, was ich bin falsch machen?

Vielen Dank für Ihre Hilfe.

Answer 1

Sie müssen angeben, dass Ihre x-Achse datumszeitbasiert ist, indem Sie eine zweite Wertachse erstellen und type auf "date" setzen. Sie müssen auch Ihre Daten beheben zweistellige Stunden enthalten als einstellige Stunden will not work sind in dataDateFormat

aktualisiert Demo:

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "xy", 
 
    "dataProvider": [{ 
 
    'nj6kJemGCxKx5dTxZ4dDNW': '95.025', 
 
    'lineColor': '#00ff00', 
 
    'x_axis_value': '00:10:06' 
 
    }, { 
 
    'nj6kJemGCxKx5dTxZ4dDNW': '94.067', 
 
    'lineColor': '#00ff00', 
 
    'x_axis_value': '00:10:07' 
 
    }, { 
 
    'nj6kJemGCxKx5dTxZ4dDNW': '98.055', 
 
    'lineColor': '#00ff00', 
 
    'x_axis_value': '00:10:08' 
 
    }, { 
 
    'nj6kJemGCxKx5dTxZ4dDNW': '97.136', 
 
    'lineColor': '#00ff00', 
 
    'x_axis_value': '00:10:09' 
 
    }, { 
 
    'nj6kJemGCxKx5dTxZ4dDNW': '97.136', 
 
    'lineColor': '#00ff00', 
 
    'x_axis_value': '00:10:10' 
 
    }], 
 
    "valueAxes": [{ 
 
    "axisAlpha": 0, 
 
    "dashLength": 1, 
 
    "position": "left", 
 
    "title": "Y Axis" 
 
    }, { 
 
    "position": "bottom", 
 
    "title": "X Axis", 
 
    "type": "date" 
 
    }], 
 
    "dataDateFormat": "JJ:NN:SS", 
 
    "graphs": [{ 
 
    "balloonText": "x:[[x]] y:[[y]]", 
 
    "bullet": "triangleUp", 
 
    "lineAlpha": 0, 
 
    "xField": "x_axis_value", 
 
    "yField": "nj6kJemGCxKx5dTxZ4dDNW", 
 
    "lineColor": "#FF6600", 
 
    "fillAlphas": 0 
 
    }], 
 
});

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#chartdiv { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/xy.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<div id="chartdiv"></div>