js代碼實現折線圖,折線圖的代碼

本文目錄一覽：

• 1、如何用JavaScript獲取WebViewString並用ECharts的庫繪製折線圖?
• 2、使用js繪圖(折線圖，柱狀圖，餅狀圖)，若同時製作多張圖，速度比較慢，如何解決
• 3、需要用js做一個折線圖，純js，不包含jquery，哪位大神有源碼，會知道怎麼弄，請告知，不剩感謝
• 4、html怎麼用js特效做折線圖

如何用JavaScript獲取WebViewString並用ECharts的庫繪製折線圖?

做金融類型的應用經常會用到數據的統計報表 諸如折線圖 ,  K線圖, 餅狀圖,柱狀圖  既能形象的表述數據的分布 , 同時又增加了數據的可讀性

實現思路: 百度Echarts支持安卓移動端的運用 , WebView加載html, 嵌套JavaScript代碼 , 即可動態實現在線圖表的展示功能..

下面展示下今天要實現的效果

進入Echarts官網下載頁 可以選擇自己需要的圖表類型 自定義下載js文件 , 精簡版,常用版, 完整版 根據需求自定義下載

導入剛下載的圖表構建工具   echarts.min.js  到安卓項目的 資產目錄(assets)下 這裡我使用的 完整版

創建 Htm l文件 , 即要展示的網頁 ,  文件名自定義 這裡我是 myechart.html

我的assets目錄結構如下:

接下來就是html文件的代碼了 首先我們為ECharts準備一個具備大小(寬高) 的 DOM 並取別名

div id=”main” style=”float: left; width: 600px;height:500px; margin-top: 20px”/div

導入圖表構建工具

script src=”js/echarts.min.js”/script

因為我這裡要展示多種類型的圖表 所以定義了幾個方法  下面以折線圖為例

var lineJson;//用於臨時存儲折線圖json對象, 便於追加數據

//創建折線圖

function createLineChart(obj){

lineJson=obj;

options = {

title : {

//text: ‘脈搏值(次/min)’,

text: obj.title,

subtext: ‘make by sxt’,

x:’left’

},

tooltip: {

trigger: ‘axis’,

formatter: “脈搏頻率 : br/{b} – {c} 次/min”

},

xAxis: {

id: ‘dataX’,

type: ‘category’,

splitLine:{

show:true

},

axisLabel: {

//formatter: ‘{value} °C’

formatter: ‘{value}’

},

data: obj.times //動態展示運動時間

},

yAxis: {

type: ‘value’,

axisLine: {onZero: true},

splitLine:{

show:true

},

axisLabel: {

//formatter: ‘{value} km’

formatter: ‘{value}’

},

min:0,

max:150//在此設置範圍

},

dataZoom: [

{

id:’dataZoom’,

show:false,

type: ‘inside’,//inside 為拖動效果

//type: ‘slider’,//slider為手動更新效果

realtime: true,

filterMode: ‘filter’,

start: 20,

end: 85,

xAxisIndex: 0

}

],

series: [{

id: ‘dataY’,

name: ‘脈搏頻率(次)/(s)’,

type: ‘line’,

smooth: true,

data: obj.steps, //動態展示運動步數數據

lineStyle: {

normal: {

width: 3,

shadowColor: ‘rgba(0,0,0,0.4)’,

shadowBlur: 10,

shadowOffsetY: 10

}

},

markPoint : {//標註點

data : [//這種方式內部自動計算最值

{

type :’max’  ,

name:’最大值’ ,

symbol:’image://’ + treeUrl,

symbolSize: [30, 30]

},

{

type : ‘min’,

name: ‘最小值’,

symbol:’image://’ + childUrl,

symbolSize: [30, 30]

}

]

},

markLine : {

data : [ {type : ‘average’, name: ‘平均值’} ]

}

}]

};

}

//更新折線圖的縮放起始位置

function updateZoomState(start,end){

myChart.setOption({

dataZoom: [{

id: ‘dataZoom’,

start: start,

end: end

}]

});

}

//獲取數組最小值

function getMinValue(obj){

var min = obj.steps[0];

for (var i = 1; i obj.steps.length; i++){

if (obj.steps[i] min){

min = obj.steps[i];

}

}

return min;

}

//獲取數組最大值

function getMaxValue(obj){

var max = obj.steps[0];

for (var i = 1; i obj.steps.length; i++){

if (obj.steps[i] max) {

max = obj.steps[i];

}

}

return max;

}

//更新折線圖數據 繼續在後面追加數據

function updateDataXY(dataX,dataY){

myChart.setOption({

xAxis: {

id: ‘dataX’,

data:lineJson.times.concat(dataX)

},

series:[{

id: ‘dataY’,

data:lineJson.steps.concat(dataY)

}],

dataZoom: [{

id: ‘dataZoom’,

start: 60,

end: 100

}]

});

}

展示圖表

//顯示圖表

function createChart(type,json){

if(type==’line’){

createLineChart(json);

}

if(type==’bar’){

createBarChart(json);

}

if(type==’pie’){

createPieChart(json);

}

if(type==’more’){

createMoreChart()

}

// 基於準備好的dom，初始化echarts實例

myChart = echarts.init(document.getElementById(‘main’));

//使用指定的配置項和數據顯示圖表。

myChart.setOption(options);

}

使用js繪圖(折線圖，柱狀圖，餅狀圖)，若同時製作多張圖，速度比較慢，如何解決

就不要用js。js只能控制div層達到效果～這樣會需要生產很多div塊，不過應該也不會很慢，估計是你代碼的問題。你可以用jsp或者php實現啊

需要用js做一個折線圖，純js，不包含jquery，哪位大神有源碼，會知道怎麼弄，請告知，不剩感謝

這個功能不是不能實現，但是我非常疑惑樓主為什麼不用JQuery？如果是純JS做的話，那工作量相當的大，一般在這種地方以積分的形式，幾乎沒有人會花數個小時給你去做這個東西的。現在這種折線圖有成熟的插件或者代碼，但是你可以去拆一下他們的插件包，裡面還一定有個JQuery的文件。

如果真的非常需要，請去CSTO上以現金報酬的方式招標吧。

給你個思路吧，如果想在頁面上畫圖，現在首選考慮到的是HTML5的Canvas功能。非常好用，順便上個代碼包吧，這個裡面有個不錯的折線圖和餅圖的示例，只能幫你這麼多了

html怎麼用js特效做折線圖

使用原生js自己寫或js庫（框架）都是可以的，由於目前HTML5並不是所有的瀏覽器都完美支持，使用兼容性比較好的js庫是個不錯的選擇。

例如Highcharts圖標庫就可以實現各類曲線圖、折線圖、區域圖、3D圖、柱狀圖等等。具體使用參考：。

Highcharts中做折線圖的demo代碼可以作為參考：

html lang=”en”

head

  script type=”text/javascript” src=””/script

  script type=”text/javascript” src=””/script

  script type=”text/javascript” src=””/script

  script

    $(function () {

    $(‘#container’).highcharts({

        chart: {

            type: ‘line’

        },

        title: {

            text: ‘Monthly Average Temperature’

        },

        subtitle: {

            text: ‘Source: WorldClimate.com’

        },

        xAxis: {

            categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]

        },

        yAxis: {

            title: {

                text: ‘Temperature (°C)’

            }

        },

        tooltip: {

            enabled: false,

            formatter: function() {

                return ‘b’+ this.series.name +’/bbr/’+this.x +’: ‘+ this.y +’°C’;

            }

        },

        plotOptions: {

            line: {

                dataLabels: {

                    enabled: true

                },

                enableMouseTracking: false

            }

        },

        series: [{

            name: ‘Tokyo’,

            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

        }, {

            name: ‘London’,

            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

        }]

    });

});

  /script

/head

body

  div id=”container” style=”min-width:700px;height:400px”/div

/body

/html