The open source JavaScript graphing library that powers Plotly

https://plot.ly/javascript/time-series/

https://plot.ly/javascript/

https://github.com/plotly/plotly.js

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Time Series in plotly.js</title>
  <!-- Plotly.js -->
  <script src="dist/plotly.min.js" type="text/javascript"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
Plotly.d3.csv("finance-charts-apple.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

  
var trace1 = {
  type: "scatter",
  mode: "lines",
  name: 'AAPL High',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.High'),
  line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",
  mode: "lines",
  name: 'AAPL Low',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.Low'),
  line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];
    
var layout = {
  title: 'Basic Time Series', 
};

Plotly.newPlot('myDiv', data, layout);
})  </script>
</body>

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Time Series in plotly.js</title>
  <!-- Plotly.js -->
  <script src="dist/plotly.min.js" type="text/javascript"  charset="utf-8"></script>
    <script src="dist/plotly-locale-zh-cn.js" charset="utf-8" type="text/javascript"></script>
</head>

<body>
  
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
Plotly.setPlotConfig({locale: 'zh-CN'})  //月份显示中文
Plotly.d3.csv("finance-charts-apple.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

  
var trace1 = {
  type: "scatter",
  mode: "lines",
  name: 'AAPL High',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.High'),
  line: {color: '#17BECF'}
}

var trace2 = {
  type: "scatter",
  mode: "lines",
  name: 'AAPL Low',
  x: unpack(rows, 'Date'),
  y: unpack(rows, 'AAPL.Low'),
  line: {color: '#7F7F7F'}
}

var data = [trace1,trace2];
    
var layout = {
  title: 'Basic Time Series', 
};

Plotly.newPlot('myDiv', data, layout,{locale: 'zh-CN'}); //
})  

</script>
</body>
</html>

相关阅读:
【翻译】JavaScript循环和作用域
【js-xlsx和file-saver插件】前端导出数据到excel
H5混合开发进阶
一分钟搞定vue全局注册事件eventBus
cordova+vue构建app进阶
LayaBox进阶之UI管理器
Layabox进阶之资源加载
H5混合开发进阶之inspect调试
认识json
正则学习记录

原文地址：https://www.cnblogs.com/geovindu/p/9229601.html