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. 7.AOP编程

    注解和xml混合使用 1.将所有的bean都配置xml中 <bean id="" class=""> 2.将所有的依赖都使用注解 @Autowire ...

  2. 利用Go2Shell 实现 Mac Finder 直接shell端打开当前文件夹

    Finder 窗口 ,点击下图所示的按钮(红色框内),即可打开Shell Terminal. 打开后,如图 用法 安装go2shell后,打开finder的application文件夹,找到go2sh ...

  3. [wxgl] load image fail

    微信小游戏 let loader = new THREE.TextureLoader() let texture = loader.load('./images/bullet.png') 报错 参考 ...

  4. 理解js中的函数调用和this

    概述 这是我看typescript的时候看引用资源看到的,原文在这里:Understanding JavaScript Function Invocation and "this" ...

  5. php cli模式和浏览器访问下加载php.ini文件的注意事项[架构篇]

    使用wampserver或Xampp时,会将配置文件放在一个统一的目录中去调用,这时如果都使用浏览器访问,自然是没有问题的,但是如果换成cli命令行模式运行,则会出现加载了的扩展无法使用的问题. 案例 ...

  6. C语言判断大小端的几种方法

    在操作系统中,经常会用到判断大小端,很多面试题中也会经常遇到,以前的时候没有总结过,这里总结一下. 以后用到了就直接可以用了. 所谓的大小端,大致的解释意思就是: [大端模式] CPU对操作数的存放方 ...

  7. Golang Struct 声明和使用

    Golang Struct 声明和使用 Go可以声明自定义的数据类型,组合一个或多个类型,可以包含内置类型和用户自定义的类型,可以像内置类型一样使用struct类型 Struct 声明 具体的语法 t ...

  8. Python模块学习 - Paramiko

    简介 ssh是一个协议,OpenSSH是其中一个开源实现,paramiko是Python的一个库,实现了SSHv2协议(底层使用cryptography). 有了Paramiko以后,我们就可以在Py ...

  9. Xamarin.Android SharedPreferences的使用方法

    SharedPreferences的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data/data/<包名>/shared_pref ...

  10. 关于appendChild和insertBefore appendTo()和append

    appendChild和insertBefore(原生js) appendTo()和append(jquery)