2. 程式人生 > >D3_柱狀圖（2）

D3_柱狀圖（2）

阿新 • • 發佈：2019-02-18
var dataset=[]; for (var i=0;i<30;i++){ var num=Math.round(Math.random()*30); dataset.push(num); } // var dataset=[5,15,25,35,45,12,12,23,65,43,78,33,33,43,12,12,23,65,43,78,33,65,43,78,33,33,43,12]; var h=350; var w=800; var maxvalue=80; var svg=d3.select("body").append("svg"); svg.attr("height"
,h) .attr("width",w); /*根據資料個數對映到w，平均分配寬度，間距是0.5，*/ var xscale=d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([0,w],0.1);//ordinal是一個序數比例尺，會根據資料集數量來平均分段，且儲存了每段的寬度， /*將y值對映到0-100*/ var yscale=d3.scale.linear()//當資料型別不是點集的形式，max（）下不用巢狀匿名函式
.domain([0,d3.max(dataset,function(d){ return d; })]) .range([5,h]); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",function(d,i){ return xscale(i); }) .attr("y"
,function(d){ return (h-yscale(d)); }) .attr("height",function(d){ return yscale(d); }) .attr("width",xscale.rangeBand()) .attr("fill",function(d){ return "rgb(0, 0, " + Math.round(d * 10) + ")"; }); /*svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x",function(d,i){ return w*i/dataset.length; }) .attr("width",function(d,i){ return w/dataset.length-2; }) .attr("height",function(d){ return d; }) .attr("y",function(d){ return h-d;//svg中矩形的座標是左上角到右下角，且只能從上向下長，既然只能從上向下，那麼久改變用h-d }) .attr("fill",function(d){ return "rgb(0,0,"+d*10+")"; }); */ svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d){ return d; }) .attr("x",function(d,i){ return xscale(i); }) .attr("y",function(d){ return (h-yscale(d)+12); }) .attr("font-size","10px") .attr("fill","white"); d3.select("button") .on("click",function(){ var dataset=[]; for (var i=0;i<30;i++){ var num=Math.round(Math.random()*maxvalue); dataset.push(num); } var xscale=d3.scale.ordinal() .domain(d3.range(dataset.length)) .rangeRoundBands([0,w],0.1);//ordinal是一個序數比例尺，會根據資料集數量來平均分段，且儲存了每段的寬度， /*將y值對映到0-100*/ var yscale=d3.scale.linear()//當資料型別不是點集的形式，max（）下不用巢狀匿名函式 .domain([0,d3.max(dataset,function(d){ return d; })]) .range([5,h]); svg.selectAll("rect") .data(dataset) .transition() .delay(function(d,i){//每個載入資料延遲 return i/dataset.length*2000; }) .duration(5000) .ease("linear") .attr("x",function(d,i){ return xscale(i); }) .attr("y",function(d){ return (h-yscale(d)); }) .attr("height",function(d){ return yscale(d); }) .attr("width",xscale.rangeBand()) .attr("fill",function(d){ return "rgb("+Math.round(d * 10)+",100, 0)"; }); svg.selectAll("text") .data(dataset) .transition() .delay(function(d,i){//每個載入資料延遲 return i/dataset.length*1000; }) .text(function(d){ return d; }) .attr("x",function(d,i){ return xscale(i); }) .attr("y",function(d){ return (h-yscale(d)+12); }) .attr("font-size","10px") .attr("fill","white"); })

相關推薦

D3_柱狀圖（2）

var dataset=[]; for (var i=0;i<30;i++){ var num=Math.round(Math.random()*30); dataset.push(num); } // var dataset=[5,15,25,35,45,12,12,23,65,4

自定義檢視---圓角柱狀圖（一）

一、寫在前文 之前寫過一篇部落格 – 巧妙使用WilliamChart繪製出只有兩個圓角的柱狀圖，當時是專案需要，所以用了第三方的庫去實現只有頂部帶兩個圓角的柱狀圖。雖然最終是實現了效果，但是第三方的圖表自定義不夠，例如控制柱狀圖的間距，高度等等。所以，最終決

android柱狀圖（自定義view）

  public class HistogramView extends View { private Paint mLinePaint; private Paint mGreenPaint; private Paint mTextPaint;

用ECharts畫多柱子柱狀圖（可點選）

其實用ECharts畫柱子還是挺簡單的，多去官網看看官方文件，就理解了。 columLabel是多柱子的名字。columName 是橫座標。bgColorList 是柱子的顏色。arr 是每個柱子的值。list 是後臺傳過來的各個柱子的值，但是要經過處理賦值給arr ，賦值的方法也不只這一種

Echarts(二、柱狀圖（各引數詳細描述）)

1.jsp頁面 <body> <div class="menutab"> <ul> <li id="zldb">質量等別監測預警</li&g

用echarts實現一個柱狀圖（前後臺原始碼）

  後臺程式碼 -------------------------controller------------------------------------- /**      * <p>人員結構-政治面貌</

eCharts-柱狀圖（橫置） 配置說明

// 例項化eChart圖表 function initEchart( idName, option ) { var myEchart = echarts.init( document.getElementById( idName ) ); myEchar

餅狀圖（PieChart）與柱形圖（BarChart）的使用

最近在工作中需要用到餅狀圖的功能，網上查了一下MPAndroidChart開源圖表庫是一個很好的東西，並下載了MPAndroidChart專案執行。於是自己寫了一個簡單的例子，使用PieChart（餅圖）的方法如下： 原始碼下載地址：https://githu

Echarts——柱狀圖（各引數詳細描述）

var echarts = require('echarts'); var myChart = echarts.init(document.getElementById('item')); let option = {

echarts柱狀圖（柱條顏色漸變，多條資料顯示指定資料數）

(上一篇echarts餅圖與本頁例子程式碼可在github（https://github.com/applebring/echarts-）上下載)--本打算與上一篇寫一塊，為防止篇幅過長分開寫，echarts柱狀圖實現柱條漸變以及顯示柱條數量限制 最終實現樣式為： 先用圖

newcoder 小A的柱狀圖（單調棧）題解

ive desc 表示 tdi 輸出 preview names images margin 題目描述 柱狀圖是有一些寬度相等的矩形下端對齊以後橫向排列的圖形，但是小A的柱狀圖卻不是一個規範的柱狀圖，它的每個矩形下端的寬度可以是不相同的一些整數，分別為a[i]

資料結構——圖（2）——圖的儲存和表示方式.md

圖的儲存方式 在實踐中，圖最常見的策略是： 將每個節點的連線儲存在鄰接列表中。 將整個圖形的連線儲存在鄰接矩陣中。 用鄰接連結串列來表示圖之間的關係 在圖中表示連線的最簡單方法是在每個節點的資料結構中儲存與其連線的節點的列表。該結構稱為鄰接列表。 例如

左右焦點輪播圖（2）

顧名思義， 這個輪播圖只有左右兩個焦點，只能左右滑動。 一、結構 <div id="box" class="all"> <div class="ad"> <ul id="imgs"> <li><img src="

tensorflow-計算圖（2）

#!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Sun Dec 23 11:26:04 2018 @author: myhaspl """ import tensorflow as tf #建立圖 c=tf.constant(0.0

UML中的九類圖（2）

一 物件圖 描述一個系統在某個時刻的靜態結構，類圖描述所有的可能情況。由名稱和屬性構成。未了解物件行為及其間的關係。 二 行為圖 序列圖 描述物件間的互動順序，著重體現物件間的訊息傳遞的時間順序，強調物件之間傳送訊息的傳送順序，顯示物件間的互動過程。 協作圖 協作

echarts相關屬性設定（2）--折線圖和柱狀圖的結合使用

type：bar和line的組合 option = { { tooltip: { trigger: 'axis', axisPointer: { // type: 'shadow' }, // label: { // normal: { //

python3繪圖示例2（基於matplotlib：柱狀圖、分布圖、三角圖等）

ims 標準 and odi dom2 lam you vars update #!/usr/bin/env python# -*- coding:utf-8 -*-from matplotlib import pyplot as pltimport numpy as np

python3繪圖示例2（基於matplotlib：柱狀圖、分佈圖、三角圖等）

#!/usr/bin/env python# -*- coding:utf-8 -*-from matplotlib import pyplot as pltimport numpy as npimport pylabimport os,sys,time,math,random# 圖1-給已有的圖加上刻度fi

JavaScript數據可視化編程學習（一）Flotr2，包含簡單的，柱狀圖，折線圖，餅圖，散點圖

基礎 沒有 cat 勝利 而是 5.4 最好的 表數據 聯系 一、基礎柱狀圖 二、基礎的折線圖 三、基礎的餅圖 四、基礎的散點圖 一、基礎柱狀圖 如果你還沒有想好你的數據用什麽類型的圖表來展示你的數據，你應該首先考慮是否可以做成柱狀圖。柱狀圖可以表示數據的

d3.js學習筆記（二）：完整的柱狀圖示例

本示例採用d3的3.x版本庫，示例程式碼如下： d3.fullAxisExample = function() { var width = 240; var height = 240; //在 body 裡新增一個 SVG 畫布