Category Archives: JavaScript

ECharts

echarts

ECharts,一個使用JavaScript 實現的開源可視化庫,可以流暢的運行在PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的矢量圖形庫ZRender,提供直觀,交互豐富,可高度個性化定制的數據可視化圖表。

豐富的可視化類型
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖,用於統計的盒形圖,用於地理數據可視化的地圖、熱力圖、線圖,用於關係數據可視化的關係圖、treemap、旭日圖,多維數據可視化的平行坐標,還有用於BI 的漏斗圖,儀錶盤,並且支持圖與圖之間的混搭。

Reference : http://echarts.baidu.com/

Example : http://echarts.baidu.com/examples/index.html#chart-type-line

D3.js

LEUNG    D3.js 沒有迴響

d3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Reference : https://d3js.org/

Google Map – Message in location point

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-TW"></script>
<script type="text/javascript">
function GoogleMap(){
    this.getMap = function(id, title, longitude, latitude, str){
        $(document).ready(function() {
            var map;
            var myLatlng = new google.maps.LatLng(longitude, latitude);
            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: true
            }

            map = new google.maps.Map(document.getElementById(id), myOptions);
            var image = "sort_down.png";
            var location = new google.maps.LatLng(longitude, latitude);
            var marker1 = new google.maps.Marker({
                position: location,
                icon: image,
                map: map
            });

            var infowindow1 = new google.maps.InfoWindow({
                content: str
            });

            var marker1 = new google.maps.Marker({
                position: location,
                icon: image,
                map: map,
                title: title
            });

            google.maps.event.addListener(marker1, 'click', function() {
                infowindow1.open(map,marker1);
            });
        });
    }
}
var googleMap = new GoogleMap();
googleMap.getMap("id", "Title", 22.316374, 114.18040 , "Hello World");
</script>
<div id="id" style="width: 500px; height: 300px;"></div>

Google Map – Basic

google-map

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-TW"></script>
<script type="text/javascript">
function GoogleMap(){
    this.getMap = function(id1, id2, longitude, latitude){
        $(document).ready(function() {
            var fenway = new google.maps.LatLng(longitude, latitude);
            var mapOptions = {center: fenway, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true};
            var map = new google.maps.Map(document.getElementById(id1), mapOptions);
            var image = "sort_down.png";
            var myLatLng = new google.maps.LatLng(longitude, latitude);
            var beachMarker = new google.maps.Marker({position: myLatLng, map: map, icon: image});
            var panoramaOptions = {position: fenway, pov: {heading: 34, pitch: 10, zoom: 1}};
            var panorama = new  google.maps.StreetViewPanorama(document.getElementById(id2),panoramaOptions);
            map.setStreetView(panorama);
        });
    }
}
var googleMap = new GoogleMap();
</script>

<script type="text/javascript">googleMap.getMap("map_canvas", "pano", 22.316374, 114.18040)</script>
<div id="map_canvas" style="width: 500px; height: 250px;"></div>
<div id="pano" style="width: 500px; height: 250px;"></div>
</script>

<script type="text/javascript">
     googleMap.getMap("map_canvas", "pano", 22.316374, 114.18040)
</script>
<div id="map_canvas" style="width: 500px; height: 250px;"></div>
<div id="pano" style="width: 500px; height: 250px;"></div>