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. Log system architecture

    0. 技术选型参考 1. Collector Keywords: Collector, Processor 名称 Beats Fluentd-bit Introduction Beats are a ...

  2. Dev修改gridview 背景色

    private void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowCellStyleEventA ...

  3. 【接口时序】2、Verilog实现流水灯及与C语言的对比

    一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件:ISE14.7 3.仿真工具:ModelSim-10.4-SE 硬件平台: 1.FPGA型号:XC6SLX45 ...

  4. node.js使用redis储存session（详细步骤）

    转储session的原因 网上有许多session需要用数据库储存的原因,对我来说原因很简单,仅仅只是node的生产环境不允许将session存到服务器的内存中.会报一个内存溢出的风险警告.所以我决定 ...

  5. php使用curl模拟登录带验证码的网站[开发篇]

    需求是这样的,需要登录带验证码的网站,获取数据,但是不可能人为一直去记录数据,想通过自动采集的方式进行,如下是试验出来的结果代码!有需要的可以参考下! <?php namespace Home\ ...

  6. docker学习篇（二）---- 基础篇

    引言 在之前的学习中,我知道了docker的三大组件分别是----镜像,容器,仓库.了解了这三个组件也就初步理解了docker.所以我学习了这三个组件,并记录下来. 镜像 docker在运行一个容器时 ...

  7. 使用maven构建多模块项目，分块开发

    在多人使用Maven协作开发项目时,尤其是稍微上点规模的项目,每个RD的工作都细分到具体功能和模块,有些模块甚至还要单独部署. 我们假设有这样一个商城项目,包括以下几个模块: 商城前台(shop) 管 ...

  8. Python之列表推导式

    我们经常需要这样处理一个列表:把一个列表里面的每个元素, 经过相同的处理 ,生成另一个列表. 比如:一个列表1,里面都是数字,我们需要生成一个新的列表B,依次存放列表A中每个元素的平方 怎么办? 当然 ...

  9. 通过jenkins API去build一个job

    背景 查看jenkins的api 直接访问 JENKINS_URL/job/JOB_NAME/api/ 就可以查看jenkins的api build一个job的话,是POST请求 JENKINS_UR ...

  10. lucene简单搜索demo

    方法类 package com.wxf.Test; import com.wxf.pojo.Goods; import org.apache.lucene.analysis.standard.Stan ...