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>

　　

The open source JavaScript graphing library that powers Plotly的更多相关文章

  1. Select the JavaScript graphing libraries you would like to compare

    Select the JavaScript graphing libraries you would like to compare:             Overview Summary Fus ...

  2. c++ socket 客户端库 socks5 客户端 RudeSocket™ Open Source C++ Socket Library

    介绍 一个c++ socket 客户端库 http://www.rudeserver.com/socket/index.html The RudeSocket™ Open Source C++ Soc ...

  3. Raphaël - JavaScript Vector Library

    Raphaël http://dmitrybaranovskiy.github.io/raphael/ // ┌──────────────────────────────────────────── ...

  4. Open Source Computer Vision Library

    https://opencv.org/ OpenCV (Open Source Computer Vision Library) is released under a BSD license and ...

  5. OpenCV（Open Source Computer Vision Library）计算机视觉库

    OpenCV(最基本的滤波到高级的物体检测皆有涵盖) 简介: OpenCV 是跨平台的,可以在  Windows.Linux.Mac OS.Android.iOS 等操作系统上运行. OpenCV 的 ...

  6. Awesome Big Data List

    https://github.com/onurakpolat/awesome-bigdata A curated list of awesome big data frameworks, resour ...

  7. 40 JavaScript Chart and Graph Libraries for Developers--reference

    reference:http://www.egrappler.com/javascript-chart-and-graph-libraries-for-developers/ BY TEAMEGRAP ...

  8. 20+ Docs and Guides for Front-end Developers (No. 5)

    It’s that time again to choose the tool or technology that we want to brush up on. If you feel like ...

  9. 13个JavaScript图表（JS图表）图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

随机推荐

  1. kaldi脚本注释一

    utils/split_data.sh ##再$data文件夹下,创建split{num_split}文件夹,再split×里面创建所有的数字文件夹#后面基本上是把$data文件夹下的各个文件都进行s ...

  2. MVC+EF CODE FIRST的使用

    1创建标准MVC项目 2通过NuGet安装EF 3在Models文件夹中编写实体类 4创建EFDB上下文类 5在webconfig中创建连接字符串,其中name=EFDB上下文类名 6通过管理控制台执 ...

  3. JavaScript 函数式编程读书笔记1

    概述 这是我读<javascript函数式编程>的读书笔记,供以后开发时参考,相信对其他人也有用. 说明:虽然本书是基于underscore.js库写的,但是其中的理念和思考方式都讲的很好 ...

  4. Spring MVC 后端获取前端提交的json格式字符串并直接转换成control方法对应的参数对象

    场景: 在web应用开发中,spring mvc凭借出现的性能和良好的可扩展性,导致使用日渐增多,成为事实标准,在日常的开发过程中,有一个很常见的场景:即前端通过ajax提交方式,提交参数为一个jso ...

  5. vue 自学项目笔记

    感觉小青推荐的学习网课,  利用vue 仿制一个去哪网, 学习的东西很多, 在食用之前,需要先确保js 和css 过关 js https://www.bilibili.com/video/av3009 ...

  6. 深入理解css3中 nth-child 和 nth-of-type 的区别

    在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...

  7. NFS客户端挂载

    关于NFS挂载#卸载: umount -fl /挂载名称#重新挂载:mount -t nfs -o rw,noac 10.8.16.11:/vx/SJOA-APP /挂载名称 #mount –v查看当 ...

  8. 关于小窗滑动，父级body也跟随滑动的解决方案

    需求:当前页面是信息列表,所以高度由内容自动填充, 所以页面可以上下滑动,加载更多, 但是下发物料一栏又为一个列表 所以做了一个弹窗框,因为是列表所以高度自然又是不可控的,所以给了一个最大高度,当超出 ...

  9. C# 常用验证

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  10. C# 中集合类型需要按多个条件排序

    在 C# (.net 3.5 之后) 中集合是可以通过 OrderBy() 和 OrderByDescending()方法来进行排序的,如果需要集合中的元素是对象,还可以通过 Lambda表达式进行按 ...