今日、私はデータ視覚化の本を読んで大丈夫だと思います。この本はデータ視覚化にフロントエンドのHTMLとJavaScriptを使用しています。
通常のランダムヒストグラム
コードは次のように表示されます。
<html>
<head>
<title>直方图</title>
</head>
<body>
<svg id="mySVG" width="800" height="600" version="1.1"
xmlns="http://www.w3.org/2000/svg"></svg>
<script>
var x=75,y=300;//定义变量x,y
var mysvg = document.getElementById("mySVG");//实例化
var svgrec = new Array();//定义新的数组
for (var i=0;i<6;i++){
svgrec[i] = document.createElement("rect");
mysvg.appendChild(svgrec[i]);
var h = Math.random()*300;
svgrec[i].outerHTML="<rect x="+(i*x)+" y="+(y-h)+" width=60 height="+(h)+" Style='fill:red' />";
}
</script>
</body>
</html>
操作の結果は次の図のようになります。
ヒストグラムのプログレッシブ描画
次のように、バーコード1を描画します。
<html>
<head>
<meta charset="utf-8">
<title>绘制单个条形块</title>
</head>
<body>
<svg id="mySVG" width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x=20 y=20 width=70 height=200 style='fill:red' />
</svg>
</body>
</html>
その結果、次の図に示すように、次のように、
同じ幅と高さのバー
コード2のグループを描画します。
<html>
<body>
<svg id="mySVG" width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</body>
<script type="text/javascript">
//绘制一组相同宽高的条形图
var mysvg = document.getElementById("mySVG");
//var window_height = window.innerHeight;获取屏幕的高度window.innerHeight
var rec = new Array();
for (var i=0;i<6;i++){
var Y = 20;
rec[i] = document.createElement("rect");
mysvg.appendChild(rec[i]);
rec[i].outerHTML="<rect x="+(20+80*i)+" y="+Y+" width='70px' height='200px' style='fill:red'/>";
}
</script>
</html>
その結果、次の図に示すように、次のように、
可変の色、可変の幅と高さの棒グラフ
コード3を描画します。
<html>
<body>
<svg id="mySVG" width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</body>
<script type="text/javascript">
//绘制可变色，可变高度的条形图
var Y = 400;//定义变量Y等于400
var mysvg = document.getElementById("mySVG");
var rec = new Array();//定义一个数组来存储数据
for (var i=0;i<6;i++){
//创建一个循环
rec[i] = document.createElement("rect");
mysvg.appendChild(rec[i]);
var h=Math.random()*300;//随着循环变化的随机数。
rec[i].outerHTML="<rect x="+(20+80*i)+" y="+(Y-h)+" width='70px' height="+h+" style='fill:rgb(0,0,"+Math.floor(h)+")'/>";//网页展示
}
</script>
</html>
その結果、次の図に示すように、次のように、
可変の色と可変の高さの
コード4で棒グラフを描画します。
<html>
<body>
<svg id="mySVG" width="800px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</body>
<script type="text/javascript">
//绘制可变多种颜色，可变高度的条形图。
var Y = 400;//定义变量Y等于400
var mysvg = document.getElementById("mySVG");
var rec = new Array();//定义一个数组来存储数据
// var col_num1 = Math.floor(Math.random()*255);
// var col_num2 = Math.floor(Math.random()*255);
// var col_num3 = Math.floor(Math.random()*255);
for (var i=0;i<6;i++){
//创建一个循环
var col_num1 = Math.floor(Math.random()*255);
var col_num2 = Math.floor(Math.random()*255);
var col_num3 = Math.floor(Math.random()*255);
rec[i] = document.createElement("rect");
mysvg.appendChild(rec[i]);
var h=Math.random()*300;//随着循环变化的随机数。
rec[i].outerHTML="<rect x="+(20+80*i)+" y="+(Y-h)+" width='70px' height="+h+" style='fill:rgb("+col_num1+","+col_num2+","+col_num3+")'/>";//网页展示
}
</script>
</html>
結果は、次の図に示すように、次のように
データ
コード5でヒストグラムを描画します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--字符集是utf-8-->
<title>数据可视化直方图</title>
</head>
<body>
<svg id="mySVG" width="800px" height="600px" version="1.1"></svg>
<script type="text/javascript">
var mysvg = document.getElementById("mySVG");
var rec = new Array();//定义一个新的数组
var txt = new Array();//定义一个新的数组
for (var i=0;i<6;i++){
//循环
rec[i] = document.createElement("rect");//创建标签rect
txt[i] = document.createElement("text");//创建标签text
mysvg.appendChild(rec[i]);
mysvg.appendChild(txt[i]);
var h = Math.random()*255;//定义高度
var r = Math.floor(Math.random()*255);//定义颜色
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);//随机颜色
rec[i].outerHTML="<rect x="+60*i+" y="+(400-h)+" width='42px' height="+h+" style='fill:rgb("+r+","+g+","+b+")'/>";//设置页面展示，还有填充色。
txt[i].outerHTML="<text x="+(60*i+5)+" y="+(400-h)+">"+Math.floor(h)+"</text>";//设置页面展示，x控制全部数字移动的位置，y控制条形图的高度，还有数字填充。
}
</script>
</body>
</html>
結果は次のとおりです。
私は現在、データの視覚化のためにHTMLとJavaScriptを学習しています。
最後に、私の記事を見に来てくれてありがとう。記事には多くの不正があるかもしれません。皆さんが彼・ハイハンを指摘してくれることを願っています。