圖表插件dygraphs.js插件使用

本文旨在記錄自己的使用過程

dygraphs其實和echarts差不多，個人覺得前者的自我定制功能很強且不是基於canvas所以性能較echarts會好很多。下面開始：

1、准備一個div

　　<div id="container_dy" style="width:600px; height:300px;"></div>

2、數據准備及數據格式要求

　　dygraphs官網對數據格式給出了五種說明(http://dygraphs.com/data.html)

 

　　

 

 

開發過程中我們使用到的csv data格式，其他格式請查官網詳細介紹。

使用ajax請求，請求后台處理好的數據

var data =
"2011-01-01," + Math.random()*100 + "\n" +
"2011-01-02," + Math.random()*100 + "\n" +
"2011-01-03," + Math.random()*100 + "\n" +
"2011-01-04," + Math.random()*100 + "\n" +
"2011-01-05," + Math.random()*100 + "\n" +
"2011-01-06," + Math.random()*100 + "\n" +
"2011-01-07," + Math.random()*100 + "\n" +
"2011-01-08," + Math.random()*100 + "\n" +
"2011-01-09," + Math.random()*100 + "\n" +
"2011-01-10," + Math.random()*100 + "\n" +
"2011-01-11," + Math.random()*100 + "\n" +
"2011-01-12," + Math.random()*100 + "\n" +
"2011-01-13," + Math.random()*100 + "\n" +
"2011-01-14," + Math.random()*100 + "\n" +
"2011-01-15," + Math.random()*100 + "\n" +
"2011-01-16," + Math.random()*100 + "\n" +
"2011-01-17," + Math.random()*100 + "\n" +
"2011-01-18," + Math.random()*100 + "\n" +
"2011-01-19," + Math.random()*100 + "\n" +
"2011-01-20," + Math.random()*100 + "\n" +
"2011-01-21," + Math.random()*100 + "\n" +
"2011-01-22," + Math.random()*100 + "\n" +
"2011-01-23," + Math.random()*100 + "\n" +
"2011-01-24," + Math.random()*100 + "\n" +
"2011-01-25," + Math.random()*100 + "\n" +
"2011-01-26," + Math.random()*100 + "\n" +
"2011-01-27," + Math.random()*100 + "\n" +
"2011-01-28," + Math.random()*100 + "\n" +
"2011-01-29," + Math.random()*100 + "\n" +
"2011-01-30," + Math.random()*100 + "\n" +
"2011-01-31," + Math.random()*100 + "\n";

 上面格式就是csv格式。

3、畫圖

核心方法 

var g = new Dygraph(div,
                data,
                {
                  option1: value1,
                  option2: value2,
                  ...
                });
div : 頁面定義好的圖形容器，document.getElementById("id");
data: 后台處理好的返回到前台的數據，如上csv格式；
{}里面填寫插件為這個圖准備的一些屬性，如：legend等，官網給了好多，選擇自己要使用的即可。詳情參考http://dygraphs.com/options.html

這里使用的屬性如下：

var g = 

new Dygraph(
document.getElementById("div_g"),
data,
{
legend: "always",
//title:"line name",//圖表的名字
titleHeight : 25,//定義圖表名字文字的高度
labels: ['Date','Value'],//指定x軸和y軸的含義
highlightCircleSize : 5,//指定鼠標放到具體的頂點時，頂點的動態表現形式
strokeWidth : 2,//定義線條的粗細
maxNumberWidth : 30,//指定數字最大寬度
// colors : echartLineColor,//多條曲線時為數組，每條線的顏色
connectSeparatedPoints : true,//如果兩點不是連續的此屬性為true時，會強制連接兩點
includeZero : true,//y軸是否顯示0點
highlightSeriesOpts :
{
strokeWidth : 2,
strokeBorderWidth : 1,
highlightCircleSize : 5
},
legendFormatter : function(data)
{
var returnString = "";
var dataList = data.series;
var dateString = "";
for (var index = 0; index < dataList.length; index++)
{
var dataObj = dataList[index];
if (dataObj.isHighlighted)
{
if (window.event)
{
var width = parseFloat("600px");
var height = parseFloat("300px");
$("#div_g .dygraph-legend").css({
"position": "absolute",
"background":"#c3c7cc",
"opacity":"0.5",
"color":"red",
"top":window.event.offsetY > height ? (window.event.offsetY + "px")
: (window.event.offsetY + 20 + "px"),

"left":window.event.offsetX > width/2 ? (window.event.offsetX + "px")
: (window.event.offsetX + "px")});

dateString = data.xHTML;

returnString = '<span>date：'
+ dateString
+ '<br />value：' + dataObj.yHTML
+ '</span>';
}
break;
}
}

return returnString;
},

//設置兩軸數據顯示格式和字體大小等

// axes :
// {
// x :
// { // 顯示時分秒
// axisLabelFormatter : function(param)
// {
// var xx = param;
// return param.Format("yyyy-MM-dd HH:mm:ss");
// },
// axisLabelWidth : 70,
// axisLabelFontSize : 10
// },
// y :
// {
// axisLabelWidth : 80,
// axisLabelFontSize : 11
// }
// }

最終顯示效果：

以上只是自己在項目中使用的功能，還有更多的功能需要去研究。