當前位置：首頁 >

Dimple.js基础

發布時間：2025/4/16 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Dimple.js基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

dimple是建立在D3基礎上的庫，通過他我們可以操控抽象級的圖表。

啟動本地HTTP服務

python -m http.server

在命令行窗口下輸入命令，默認是8000端口。

要想停止本地服務器，輸入

Control -c

退出過程

用dimple.js來畫圖

function draw(data) {/*D3.js setup code*/ "use strict";var margin = 75,width = 1400 - margin,height = 600 - margin;debugger; var svg = d3.select("body").append("svg").attr("width", width + margin).attr("height", height + margin).append('g').attr('class','chart');/*Dimple.js Chart construction code*/var myChart = new dimple.chart(svg, data);#表示X軸采用什么數據類型，這里是用TImeAxis函數規定的連續時間值。#第一個變量是我們要添加哪個軸，這是是x軸。第二個變量是我們要在這個軸上寫什#么信息#這一行的代碼意思是向圖表中添加一個時間軸，他由圖表中的x軸表示，對應于數據##中的年分列var x = myChart.addTimeAxis("x", "year"); #在圖表中的y軸上添加連續值，對應于數據中的觀賽人數列myChart.addMeasureAxis("y", "attendance");#addSeries規定了我們準備制作圖表的類型，在這個例子中，我們傳遞一個dimple.pl#ot.bar類型的圖表。這個null參數的意思是告訴 Dimple #不要以任何方式為柱子分面或進行組合myChart.addSeries(null, dimple.plot.bar);#最后一行命令用來畫圖myChart.draw();};

我們只需要更改幾個簡單的命令，再從新加載之后，得到的就是新的圖像

原圖：

更改命令：

新圖：

定制Dimple圖表

給圖表的小圓點上色

如果我們想要將我們最新構造的一張圖中的圓圈用紅色來填充該怎么做呢？

在圖中對小圓圈右鍵審查元素，可以發現小圓圈對應的是一個dimple-series-1

在HTML文件中，我們只需要向整個頁面中添加一個CSS樣式，確保其中含有dimple-series-1類的圓。

選擇帶有dimple-series-1類的圓圈元素，然后涂上紅色就可以了

添加如下代碼

圖片變成紅色了

給圖表添加標題

我們添加如下代碼生成標題

效果如圖

但是標題效果還不是很好，有點偏，我們讓標題居中

最后代碼如下：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="http://d3js.org/d3.v3.min.js"></script><script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script><style>circle.dimple-series-1{fill: red;}h2{text-align:center;}</style><script type="text/javascript">function draw(data) {/*D3.js setup code*/ "use strict";var margin = 75,width = 1400 - margin,height = 600 - margin;d3.select('body').append('h2').text("World Cup Attendance");var svg = d3.select("body").append("svg").attr("width", width + margin).attr("height", height + margin).append('g').attr('class','chart');/*Dimple.js Chart construction code*/var myChart = new dimple.chart(svg, data);var x = myChart.addTimeAxis("x", "year"); myChart.addMeasureAxis("y", "attendance");myChart.addSeries(null, dimple.plot.scatter);myChart.addSeries(null, dimple.plot.line);myChart.draw();};</script></head> <body><script type="text/javascript">/*Use D3 (not dimple.js) to load the TSV fileand pass the contents of it to the draw function*/d3.tsv("world_cup.tsv", draw);</script> </body> </html>

總結

以上是生活随笔為你收集整理的Dimple.js基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。