2017-12-18 72 views
0

Amchartsライブラリを使用して散布図をプロットしようとしていますが、私のデータは時系列です。ここ時系列データを含むAmchart散布図

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 
    }], 
} 
); 

はJSFiddleです::http://jsfiddle.net/Shivin15/o3kp2dqb/

iがm何上の任意の提案私は

以下

はこれまでのところ、私が試してみました何のために私のjavascriptのコードで、それをプロットする苦労してm個間違っている?

はあなたの助けをいただき、ありがとうございます。

答えて

1

第2の値軸を作成し、type"date"に設定することによって、x軸がdatetimeベースであることを指定する必要があります。ありがとうございました

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>

+0

:あなたはまた、一桁の時間がwill not work

dataDateFormatで更新されたデモしているように、2桁の時間を含むようにあなたのデータを修正する必要があります –

関連する問題