Fatal编程技术网
  • javascript/
  • Javascript 生成Y轴上具有时间（AM/PM）的折线图

Javascript 生成Y轴上具有时间（AM/PM）的折线图

javascript html twitter-bootstrap charts

Javascript 生成Y轴上具有时间（AM/PM）的折线图,javascript,html,twitter-bootstrap,charts,amcharts,Javascript,Html,Twitter Bootstrap,Charts,Amcharts,我需要画一个图表，它的Y轴是“AM/PM”格式的时间 我尝试了不同的可用库，如：。但我不能以am/PM时间显示图表，它只接受十进制值 这是我截取的代码： <!DOCTYPE html> <html lang="en"> <head> <title>Chart example</title> <meta charset="utf-8"> <meta http-equiv="x-ua-compatibl

我需要画一个图表，它的Y轴是“AM/PM”格式的时间

我尝试了不同的可用库，如：。但我不能以am/PM时间显示图表，它只接受十进制值

这是我截取的代码：

 <!DOCTYPE html>
 <html lang="en">
  <head>
  <title>Chart example</title>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=Edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="./js/charts js/amcharts.js"></script>
  <script src="https://www.amcharts.com/lib/3/serial.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 src="https://www.amcharts.com/lib/3/amcharts.js"></script>

  <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

  </head>      
  <style>
   #chartdiv {
        width   : 100%;
       height   : 500px;
    }
   </style>


  <!-- Chart code -->
  <script>
  var chartData = generateChartData();

var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"legend": {
    "useGraphSettings": true
},
"dataProvider": chartData,
"synchronizeGrid":true,
"valueAxes": [{
    "id":"v1",
    "axisColor": "#FF6600",
    "axisThickness": 2,
    "axisAlpha": 1,
    "position": "left"
}],
"graphs": [{
    "valueAxis": "v1",
    "lineColor": "blue",
    "bullet": "round",
    "bulletBorderThickness": 2,
    "hideBulletsCount": 30,
    "title": "Reports Printing Time",
    "valueField": "reportsPrintingTime",
    "fillAlphas": 0,
    "xField": "dateOfReportGen",
    "yField": "timeOfReportGen"
}, {
    "valueAxis": "v2",
    "lineColor": "#FF6600",
    "bullet": "square",
    "bulletBorderThickness": 2,
    "hideBulletsCount": 30,
    "title": "SLA Time",
    "valueField": "slaTime",
    "fillAlphas": 0
}],
"chartScrollbar": {},
"chartCursor": {
    "cursorPosition": "mouse"
},
"categoryField": "date",
"categoryAxis": {
    "parseDates": true,
    "axisColor": "#DADADA",
    "minorGridEnabled": true
},
"export": {
    "enabled": true,
    "position": "bottom-right"
 }
 });

 chart.addListener("dataUpdated", zoomChart);
 zoomChart();

function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate()-10);

    var reportsPrintingTime = ['9:30 AM','8:25 AM','11:05 AM','7:45 AM','9:25 AM','8:30 AM','9:10 AM','7:20 AM','9:55 AM','8:42 AM'];
    var slaTime = 10;    

for (var i = 0; i < 10; i++) { 

   //JUST FOR GETTING THE NEXT DATE VALUE
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);         

    chartData.push({
        date: newDate,
        reportsPrintingTime: reportsPrintingTime[i],
        slaTime: slaTime           
    });
  }
return chartData;
}

function zoomChart(){
chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length 
- 1);
}

</script>
<body>    
<div id="chartdiv"></div>
</body>


图表示例
#沙特迪夫{
宽度：100%；
高度：500px；
}
var chartData=generateChartData（）；
var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“串行”，
“主题”：“光”，
“传奇”：{
“useGraphSettings”：正确
},
“数据提供者”：图表数据，
“synchronizeGrid”：正确，
“价值轴”：[{
“id”：“v1”，
“axisColor”：“FF6600”，
"厚度":二,，
“axisAlpha”：1，
“位置”：“左”
}],
“图表”：[{
“valueAxis”：“v1”，
“线条颜色”：“蓝色”，
“子弹”：“圆形”，
“厚度”：2，
“HidebulletScont”：30，
“标题”：“报告打印时间”，
“valueField”：“reportsPrintingTime”，
“fillAlphas”：0，
“xField”：“dateOfReportGen”，
“yField”：“报告时间”
}, {
“valueAxis”：“v2”，
“lineColor”：“FF6600”，
“子弹”：“方形”，
“厚度”：2，
“HidebulletScont”：30，
“标题”：“SLA时间”，
“valueField”：“slaTime”，
“填充字母”：0
}],
“图表滚动条”：{}，
“图表光标”：{
“光标位置”：“鼠标”
},
“类别字段”：“日期”，
“分类法”：{
“parseDates”：正确，
“axisColor”：“DADADA”，
“minorGridEnabled”：真
},
“出口”：{
“启用”：正确，
“位置”：“右下角”
}
});
chart.addListener（“数据更新”，zoomChart）；
zoomChart（）；
函数generateChartData（）{
var chartData=[]；
var firstDate=新日期（）；
firstDate.setDate（firstDate.getDate（）-10）；
var Reporting SprintingTime=['9:30 AM'、'8:25 AM'、'11:05 AM'、'7:45 AM'、'9:25 AM'、'8:30 AM'、'9:10 AM'、'7:20 AM'、'9:55 AM'、'8:42 AM']；
var-slaTime=10；
对于（var i=0；i<10；i++）{
//仅用于获取下一个日期值
var newDate=新日期（firstDate）；
newDate.setDate（newDate.getDate（）+i）；
chartData.push({
日期：newDate，
reportsPrintingTime:reportsPrintingTime[i]，
slaTime：slaTime
});
}
返回图表数据；
}
函数zoomChart（）{
chart.zoomToIndex（chart.dataProvider.length-20，chart.dataProvider.length
- 1);
}
只是想知道是否有人能告诉我这里出了什么问题。有没有更好的方法来实现这一点？非常感谢。

您可以在V3中使用以下选项使用AmCharts格式化日期：

考虑到AmCharts正在开发版本4，我还建议您检查一下，以防您想尝试最新版本

有几件事你需要注意：

日期格式

确保已设置与数据中的字符串匹配的字符串。你不需要在那里使用上午/下午的时间。您可以在解析标签时执行此操作

最短期限

默认情况下，
CategoryAxis
最小周期设置为
“DD”
。您需要将其更改为
“mm”
以显示分钟数

格式化标签

您可以使用
CategoyAxis
解析标签，例如：

"labelFunction": function (label, date) {
    return AmCharts.formatDate(date, "L:NN A");
}
请检查此示例：