當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Dimple.js基础

發(fā)布時(shí)間：2025/4/16 编程问答 17 豆豆

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

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

啟動(dòng)本地HTTP服務(wù)

python -m http.server

在命令行窗口下輸入命令，默認(rèn)是8000端口。

要想停止本地服務(wù)器，輸入

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軸采用什么數(shù)據(jù)類型，這里是用TImeAxis函數(shù)規(guī)定的連續(xù)時(shí)間值。#第一個(gè)變量是我們要添加哪個(gè)軸，這是是x軸。第二個(gè)變量是我們要在這個(gè)軸上寫什#么信息#這一行的代碼意思是向圖表中添加一個(gè)時(shí)間軸，他由圖表中的x軸表示，對(duì)應(yīng)于數(shù)據(jù)##中的年分列var x = myChart.addTimeAxis("x", "year"); #在圖表中的y軸上添加連續(xù)值，對(duì)應(yīng)于數(shù)據(jù)中的觀賽人數(shù)列myChart.addMeasureAxis("y", "attendance");#addSeries規(guī)定了我們準(zhǔn)備制作圖表的類型，在這個(gè)例子中，我們傳遞一個(gè)dimple.pl#ot.bar類型的圖表。這個(gè)null參數(shù)的意思是告訴 Dimple #不要以任何方式為柱子分面或進(jìn)行組合myChart.addSeries(null, dimple.plot.bar);#最后一行命令用來畫圖myChart.draw();};

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

原圖：

更改命令：

新圖：

定制Dimple圖表

給圖表的小圓點(diǎn)上色

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

在圖中對(duì)小圓圈右鍵審查元素，可以發(fā)現(xiàn)小圓圈對(duì)應(yīng)的是一個(gè)dimple-series-1

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

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

添加如下代碼

圖片變成紅色了

給圖表添加標(biāo)題

我們添加如下代碼生成標(biāo)題

效果如圖

但是標(biāo)題效果還不是很好，有點(diǎn)偏，我們讓標(biāo)題居中

最后代碼如下：

<!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>

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。