python前端图表框架_图表highcharts联合jquery ajax 后端取数据前端图表渲染

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

对个人用户完全免费；

纯JS，无BS；

支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；

跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；

提示功能：鼠标移动到图表的某一点上有提示信息；

放大功能：选中图表部分放大，近距离观察图表；

易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

时间轴：可以精确到毫秒；

Highcharts提供大量的选项配置参数，您可以轻松定制符合用户要求的图表，目前官网只提供英文版的开发配置说明文档，而中文版的文档网上甚少，且零散不全。这里，我把Highcharts常用的最核心的参数选项配置整理成文档，与大家分享。

Chart：图表区选项

Chart图表区选项用于设置图表区相关属性。参数描述默认值

backgroundColor设置图表区背景色#FFFFFF

borderWidth设置图表边框宽度0

borderRadius设置图表边框圆角角度5

renderTo图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值null

defaultSeriesType默认图表类型line, spline, area, areaspline, column, bar, pie , scatter0

width图表宽度，默认根据图表容器自适应宽度null

height图表高度，默认根据图表容器自适应高度null

margin设置图表与其他元素之间的间距，数组，如[0,0,0,0][null]

plotBackgroundColor主图表区背景色，即X轴与Y轴围成的区域的背景色null

plotBorderColor主图表区边框的颜色，即X轴与Y轴围成的区域的边框颜色null

plotBorderWidth主图表区边框的宽度0

shadow是否设置阴影，需要设置背景色backgroundColor。false

reflow是否自使用图表区域高度和宽度，如果没有设置width和height时，会自适应大小。true

zoomType拖动鼠标进行缩放，沿x轴或y轴进行缩放，可以设置为：'x','y','xy'''

events事件回调，支持addSeries方法，click方法，load方法，selection方法等的回调函数。

Color：颜色选项

Color颜色选项用于设置图表的颜色方案。参数描述默认值

color用于展示图表，折线/柱状/饼状等图的颜色，数组形式。array

Highcharts已经默认提供了多种颜色方案，当要显示的图形多于颜色种类时，多出的图形会自动从第一种颜色方案开始选取。自定义颜色方案的方法：Highcharts.setOptions({ colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] });

Title：标题选项

Title标题选项用于设置图表的标题相关属性。参数描述默认值

text标题文本内容。Chart title

align水平对齐方式。center

verticalAlign垂直对齐方式。top

margin标题与副标题之间或者主图表区间的间距。15

floating是否浮动，如果为true，则标题可以偏离主图表区，可配合x,y属性使用。false

style设置CSS样式。{color: '#3E576F',fontSize: '16px'}

Subtitle：副标题选项

副标题提供的属性选项与标题title大致相同，可参照上述标题选项，值得一提的是副标题的text选项默认为''，即空的，所以默认情况下副标题不显示。

xAxis：X轴选项

X轴选项用于设置图表X轴相关属性。参数描述默认值

categories设置X轴分类名称，数组，例如：categories: ['Apples', 'Bananas', 'Oranges'][]

titleX轴名称，支持text、enabled、align、rotation、style等属性

labels设置X轴各分类名称的样式style，格式formatter，角度rotation等。array

maxX轴最大值(categories为空时)，如果为null，则最大值会根据X轴数据自动匹配一个最大值。null

minX轴最小值(categories为空时)，如果为null，则最小值会根据X轴数据自动匹配一个最小值。array

gridLineColor网格(竖线)颜色#C0C0C0

gridLineWidth网格(竖线)宽度1

lineColor基线颜色#C0D0E0

lineWidth基线宽度0

yAxis：Y轴选项

Y轴选项与上述xAxis选项基本一致，请参照上表中的参数设置，不再单独列出。

Series：数据列选项

数据列选项用于设置图表中要展示的数据相关的属性。参数描述默认值

data显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]''

name显示数据列的名称。''

type数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or splineline

plotOptions：数据点选项

plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异，现将常用选项列出来。参数描述默认值

enabled是否在数据点上直接显示数据false

allowPointSelect是否允许使用鼠标选中数据点false

formatter回调函数，格式化数据显示内容formatter: function() {return this.y;}

Tooltip：数据点提示框

Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。参数描述默认值

enabled是否显示提示框true

backgroundColor设置提示框的背景色rgba(255, 255, 255, .85)

borderColor提示框边框颜色，默认自动匹配数据列的颜色auto

borderRadius提示框圆角度5

shadow是否显示提示框阴影true

style设置提示框内容样式，如字体颜色等color:'#333'

formatter回调函数，用于格式化输出提示框的显示内容。返回的内容支持html标签如：, , , ,
, 2

Legend：图例选项

legend用于设置图例相关属性。参数描述默认值

layout显示形式，支持水平horizontal和垂直verticalhorizontal

align对齐方式。center

backgroundColor图例背景色。null

borderColor图例边框颜色。#909090

borderRadius图例边框角度5

enabled是否显示图例true

floating是否可以浮动，配合x，y属性。false

shadow是否显示阴影false

style设置图例内容样式''

第一个例子：

这个是从后端api取值，后端再从数据库里取值。

为了不让整个页面刷新，用了ajax做局部刷新

$(function () {

$(document).ready(function () {

// Mysql Questions

var mysqlQuestionsOptions = {

chart: {

renderTo: 'mysql-questions-container',

type: 'spline'

title: {

text: '',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: {

title: {

text: 'per second'

}, min: 0

series: [{

},{

},{

},{

},{

}]

};

$.ajax({

url: 'stats/mysql/questions',

dataType: "json",

success: function (data) {

//init series arays

select_arr = [];

insert_arr = [];

replace_arr = [];

update_arr = [];

delete_arr =[];

for (i in data) {

//build

var r = data[i];

select_arr.push([r.ts, r.Select_per_second]);

insert_arr.push([r.ts, r.Insert_per_second]);

replace_arr.push([r.ts, r.Replace_per_second]);

update_arr.push([r.ts, r.Update_per_second]);

delete_arr.push([r.ts, r.Delete_per_second]);

}

//save series

mysqlQuestionsOptions.series[0].data = select_arr;

mysqlQuestionsOptions.series[1].data = insert_arr;

mysqlQuestionsOptions.series[2].data = replace_arr;

mysqlQuestionsOptions.series[3].data = update_arr;

mysqlQuestionsOptions.series[4].data = delete_arr;

var chart = new Highcharts.Chart(mysqlQuestionsOptions);

cache: false

});

// Mysql Select Sort

var mysqlSelectSortOptions = {

chart: {

renderTo: 'mysql-select-sort-container',

type: 'spline'

title: {

text: '',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: {

title: {

text: 'per second'

}, min: 0

series: [{

},{

},{

},{

},{

},{

},{

},{

}]

};

$.ajax({

url: 'stats/mysql/select_sort',

dataType: "json",

success: function (data) {

//init series arays

select_scan_arr = [];

select_range_arr = [];

select_full_join_arr = [];

select_range_check_arr = [];

select_full_range_join_arr =[];

sort_scan_arr =[];

sort_range_arr =[];

sort_merge_passes_arr =[];

for (i in data) {

//build

var r = data[i];

select_scan_arr.push([r.ts, r.Select_scan_per_sec]);

select_range_arr.push([r.ts, r.Select_range_per_sec]);

select_full_join_arr.push([r.ts, r.Select_full_join_per_sec]);

select_range_check_arr.push([r.ts, r.Select_range_check_per_sec]);

select_full_range_join_arr.push([r.ts, r.Select_full_range_join_per_sec]);

sort_scan_arr.push([r.ts, r.Sort_scan_per_sec]);

sort_range_arr.push([r.ts, r.Sort_range_per_sec]);

sort_merge_passes_arr.push([r.ts, r.Sort_merge_passes_per_sec]);

}

//save series

mysqlSelectSortOptions.series[0].data = select_scan_arr;

mysqlSelectSortOptions.series[1].data = select_range_arr;

mysqlSelectSortOptions.series[2].data = select_full_join_arr;

mysqlSelectSortOptions.series[3].data = select_range_check_arr;

mysqlSelectSortOptions.series[4].data = select_full_range_join_arr;

mysqlSelectSortOptions.series[5].data = sort_scan_arr;

mysqlSelectSortOptions.series[6].data = sort_range_arr;

mysqlSelectSortOptions.series[7].data = sort_merge_passes_arr;

var chart = new Highcharts.Chart(mysqlSelectSortOptions);

cache: false

});

// Mysql Connections

var mysqlConnectionsOptions = {

chart: {

renderTo: 'mysql-connections-container',

type: 'spline'

title: {

text: '',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: [{

title: {

text: 'per second'

}, min: 0

},{

title: {

text: 'count'

}, min: 0,

opposite: true

}],

series: [{

yAxis : 1, type: 'area'

},{

yAxis : 1, type: 'area'

},{

yAxis : 1, type: 'area'

},{

yAxis : 1

},{

yAxis : 0

},{

yAxis : 0

},{

yAxis : 0

}]

};

$.ajax({

url: 'stats/mysql/connections',

dataType: "json",

success: function (data) {

//init series arays

connections_arr = [];

aborted_connects_arr = [];

aborted_clients_arr = [];

max_used_connections_arr = [];

max_connections_arr =[];

process_count_arr = [];

running_process_count_arr =[];

for (i in data) {

//build

var r = data[i];

connections_arr.push([r.ts, r.Connections_per_second]);

aborted_connects_arr.push([r.ts, r.Aborted_connects_per_second]);

aborted_clients_arr.push([r.ts, r.Aborted_clients_per_second]);

max_used_connections_arr.push([r.ts, r.max_used_connections]);

max_connections_arr.push([r.ts, r.max_connections]);

process_count_arr.push([r.ts, r.process_count]);

running_process_count_arr.push([r.ts, r.process_count_non_sleep]);

}

//save series

mysqlConnectionsOptions.series[4].data = connections_arr;

mysqlConnectionsOptions.series[5].data = aborted_connects_arr;

mysqlConnectionsOptions.series[6].data = aborted_clients_arr;

mysqlConnectionsOptions.series[0].data = max_connections_arr;

mysqlConnectionsOptions.series[1].data = max_used_connections_arr;

mysqlConnectionsOptions.series[2].data = process_count_arr;

mysqlConnectionsOptions.series[3].data = running_process_count_arr;

var chart = new Highcharts.Chart(mysqlConnectionsOptions);

cache: false

});

// Mysql Bytes

var mysqlBytesOptions = {

chart: {

renderTo: 'mysql-bytes-container',

type: 'spline'

title: {

text: '',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: {

title: {

text: 'kBps'

}, min: 0

series: [{

},{

}]

};

$.ajax({

url: 'stats/mysql/bytes',

dataType: "json",

success: function (data) {

//init series arays

sent = [];

recieved =[];

for (i in data) {

//build

var r = data[i];

sent.push([r.ts, r.kBps_sent]);

recieved.push([r.ts, r.kBps_recieved]);

}

//save series

mysqlBytesOptions.series[0].data = sent;

mysqlBytesOptions.series[1].data = recieved;

var chart = new Highcharts.Chart(mysqlBytesOptions);

cache: false

});

// Mysql Temp

var mysqlTempOptions = {

chart: {

renderTo: 'mysql-temp-container',

type: 'spline'

title: {

text: '',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: {

title: {

text: 'per minute'

}, min: 0

series: [{

},{

},{

}]

};

$.ajax({

url: 'stats/mysql/temp',

dataType: "json",

success: function (data) {

//init series arays

tmp_disk_tables = [];

tmp_tables = [];

tmp_files = [];

for (i in data) {

//build

var r = data[i];

tmp_disk_tables.push([r.ts, r.Created_tmp_disk_tables_per_min]);

tmp_tables.push([r.ts, r.Created_tmp_tables_per_min]);

tmp_files.push([r.ts, r.Created_tmp_files_per_min]);

}

//save series

mysqlTempOptions.series[0].data = tmp_disk_tables;

mysqlTempOptions.series[1].data = tmp_tables;

mysqlTempOptions.series[2].data = tmp_files;

var chart = new Highcharts.Chart(mysqlTempOptions);

cache: false

});

// Mysql Table Locks

var mysqlTableLocksOptions = {

chart: {

renderTo: 'mysql-table-locks-container',

type: 'spline'

title: {

text: '',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: {

title: {

text: 'per second'

}, min: 0

series: [{

},{

}]

};

$.ajax({

url: 'stats/mysql/table_locks',

dataType: "json",

success: function (data) {

//init series arays

wait = [];

immediate = [];

for (i in data) {

//build

var r = data[i];

wait.push([r.ts, r.Table_locks_wait_per_sec]);

immediate.push([r.ts, r.Table_locks_immediate_per_sec]);

}

//save series

mysqlTableLocksOptions.series[0].data = wait;

mysqlTableLocksOptions.series[1].data = immediate;

var chart = new Highcharts.Chart(mysqlTableLocksOptions);

cache: false

});

// Mysql Innodb Buffer Pool Usage

var mysqlInnoDBBPOptions = {

chart: {

renderTo: 'mysql-innodb-bp-container',

type: 'area'

title: {

text: 'Buffer Pool Usage',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: [{

title: {

text: 'MBytes'

}, min: 0

},{

title: {

text: 'Hit Rate %'

}, min: 0, max: 100, opposite: true

}],

series: [{

},{

},{

}]

};

// Mysql Innodb

var mysqlInnoDBOptions = {

chart: {

renderTo: 'mysql-innodb-container',

type: 'spline'

title: {

text: 'InnoDB Stats',

x: -20 //center

xAxis: {

type: 'datetime'

yAxis: {

title: {

text: 'per second'

}, min: 0

series: [{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

},{

}]

};

$.ajax({

url: 'stats/mysql/innodb',

dataType: "json",

success: function (data) {

//init series arays

bp_used = [];

bp_total = [];

bp_read_ratio = [];

bp_read_requests = [];

bp_reads = []

bp_read_rnd = [];

bp_read_seq = [];

bp_write_req = [];

bp_pages_flush = [];

bp_wait_free = [];

row_lock_waits = [];

data_reads = [];

data_write = [];

data_fsyncs = [];

pages_created = [];

pages_read = [];

pages_written = [];

rows_deleted = [];

rows_inserted = [];

rows_read = [];

rows_updated = [];

for (i in data) {

//build

var r = data[i];

bp_used.push([r.ts, r.Innodb_buffer_pool_used_mb]);

bp_total.push([r.ts, r.Innodb_buffer_pool_total_mb]);

bp_read_ratio.push([r.ts, r.Innodb_buffer_pool_read_ratio]);

bp_read_requests.push([r.ts, r.Innodb_buffer_pool_read_requests_per_second]);

bp_reads.push([r.ts, r.Innodb_buffer_pool_reads_per_second]);

bp_read_rnd.push([r.ts, r.Innodb_buffer_pool_read_ahead_rnd_per_second]);

bp_read_seq.push([r.ts, r.Innodb_buffer_pool_read_ahead_seq_per_second]);

bp_write_req.push([r.ts, r.Innodb_buffer_pool_write_requests_per_second]);

bp_pages_flush.push([r.ts, r.Innodb_buffer_pool_pages_flushed_per_second]);

bp_wait_free.push([r.ts, r.Innodb_buffer_pool_wait_free_per_second]);

row_lock_waits.push([r.ts, r.Innodb_row_lock_waits_per_second]);

data_reads.push([r.ts, r.Innodb_data_reads_per_second]);

data_write.push([r.ts, r.Innodb_data_writes_per_second]);

data_fsyncs.push([r.ts, r.Innodb_data_fsyncs_per_second]);

pages_created.push([r.ts, r.Innodb_pages_created_per_second]);

pages_read.push([r.ts, r.Innodb_pages_read_per_second]);

pages_written.push([r.ts, r.Innodb_pages_written_per_second]);

rows_deleted.push([r.ts, r.Innodb_rows_deleted_per_second]);

rows_inserted.push([r.ts, r.Innodb_rows_inserted_per_second]);

rows_read.push([r.ts, r.Innodb_rows_read_per_second]);

rows_updated.push([r.ts, r.Innodb_rows_updated_per_second]);

}

//save series

mysqlInnoDBBPOptions.series[1].data = bp_used;

mysqlInnoDBBPOptions.series[0].data = bp_total;

mysqlInnoDBBPOptions.series[2].data = bp_read_ratio;

mysqlInnoDBOptions.series[0].data = bp_read_requests;

mysqlInnoDBOptions.series[1].data = bp_reads;

mysqlInnoDBOptions.series[2].data = bp_read_rnd;

mysqlInnoDBOptions.series[3].data = bp_read_seq;

mysqlInnoDBOptions.series[4].data = bp_write_req;

mysqlInnoDBOptions.series[5].data = bp_pages_flush;

mysqlInnoDBOptions.series[6].data = bp_wait_free;

mysqlInnoDBOptions.series[7].data = row_lock_waits;

mysqlInnoDBOptions.series[8].data = data_reads;

mysqlInnoDBOptions.series[9].data = data_write;

mysqlInnoDBOptions.series[10].data = data_fsyncs;

mysqlInnoDBOptions.series[11].data = pages_created;

mysqlInnoDBOptions.series[12].data = pages_read;

mysqlInnoDBOptions.series[13].data = pages_written;

mysqlInnoDBOptions.series[14].data = rows_deleted;

mysqlInnoDBOptions.series[15].data = rows_inserted;

mysqlInnoDBOptions.series[16].data = rows_updated;

var chart = new Highcharts.Chart(mysqlInnoDBBPOptions);

chart = new Highcharts.Chart(mysqlInnoDBOptions);

cache: false

});

$(document).scroll(function(){

// If has not activated (has no attribute "data-top"

if (!$('.subnav').attr('data-top')) {

// If already fixed, then do nothing

if ($('.subnav').hasClass('subnav-fixed')) return;

// Remember top position

var offset = $('.subnav').offset();

$('.subnav').attr('data-top', offset.top);

}

if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())

$('.subnav').addClass('subnav-fixed');

else

$('.subnav').removeClass('subnav-fixed');

});

第二个例子

这个和前面是一样的方式，这里做了多个引用，也就是可以画多条线路

这个图不是我这的，但下面的代码是行的通的，可以放到一个js里面引用，然后通过ajax传值过去，在前端进行数据的渲染。

var charts = new Array();

var serverCount = 6;

var lastTimes = new Array();

var max = ${params.int("max")?:120};

$(document).ready(function() {

Highcharts.setOptions({

global: {

useUTC: false

}

});

for (var i = 0; i < serverCount; i++) {

charts[i] = new Highcharts.Chart({

chart: {

renderTo: 'container' + i,

type: 'spline',

events: {

load: function() {

// set up the updating of the chart each second

var series = this.series;

var serverIndex = i;

lastTimes[serverIndex] = 0;

var loadData = function() {

$.getJSON("http://${request.serverName}:${request.serverPort}${request.contextPath}/toolkits/queryStatistics.gsp", {"lasTime":lastTimes[serverIndex],"proxy":true,"index":serverIndex,"max":max}, function(data) {

for (var k = 0; k < series.length; k++) {

for (var j = 0; j < data[k].length; j++) {

var point = data[k][j];

var isShift = series[k].data.length >= max;

console.log("series " + k + ".data.length=" + series[k].data.length);

var lastTime = 0;

if (series[k].data.length > 0)

lastTime = series[k].data[series[k].data.length - 1].x;

if (point[0] > lastTime)

series[k].addPoint([point[0],point[1]], true, isShift);

lastTimes[serverIndex] = point[0];

}

})

};

loadData();

setInterval(loadData, 60000);

}

title: {

text: '访问量实时监控'

xAxis: [

{

type: 'datetime',

tickPixelInterval: 120

}

yAxis: [

{

title: {

text: '总请求/分钟',

style: {

color: '#3E576F'

}

{

title: {

text: '平均响应时间',

style: {

color: '#00AA00'

}

},opposite:true

}

plotOptions: {

spline: {

marker:{

enabled: false,

states: {

hover: {

enabled: true,

symbol: 'circle',

radius: 5,

lineWidth: 1

}

tooltip: {

formatter: function() {

return '' + this.series.name + '
' +

Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' +

Highcharts.numberFormat(this.y, 2);

}

legend: {

enabled: true

exporting: {

enabled: false

series: [

{

data: []

{

data: []

{

yAxis:1,

data: []

}

]

});

}

})

python前端图表框架_图表highcharts联合jquery ajax 后端取数据前端图表渲染相关推荐

图库highcharts联合jquery ajax 后端取数据前端图表渲染
http://http://www.it165.net/pro/html/201306/6151.html Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容 ...
前端ui框架_跨屏建站发布同名响应式前端ui框架
跨屏建站发布同名响应式前端ui框架,它是跨屏建站关于前端页面构建上的积累的结晶,现已开源,我们将持续的用开源的方式做好ui框架产品,用心做好建站产品. 关于跨屏UI框架是基于Bootstrap的扩展 ...
vue 前端商城框架_前端工程师要掌握几个Vue框架
vue是一套用于构建用户界面的渐进式JavaScript框架,简单说Vue是类似于view的前端框架. vue开发核心是关注视图层,同时它更加容易与第三方库结合,再者我们在现有的项目中可以直接整合一起 ...
丽水数据可视化设计价格_网站建设之B端交互设计——数据可视化图表
在B端设计中,数据可视化是必不可少而且非常重要,越来越多的设计师需要和数据打交道,但是很多设计师不懂可视化当中不同用途的图表规范,只是单纯设计出好看的数据图表,却不能给用户带来更多的信息和价值. 因此 ...
前端dashboard框架_微前端在网易七鱼的实践
一.前言网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台.在七鱼业务中,有在线系统.呼叫系统.机器人.工单系统.数据大屏等业务线,它们分布在两个业务端,管理端和客服端.这两个端的功能框架类似, ...
sql azure 语法_使用Azure Data Studio从SQL Server数据创建图表
sql azure 语法 In this article, we will explore charts in an Azure Data Studio using data stored in SQ ...
前端dashboard框架_后台管理系统，前端框架用什么最好？
当你写项目的时候,如何快速的完成一个项目的搭建,这个时候就需要借助到一些模板了,前端开发的一个好处就是,各类UI模板都是相当的齐全的,直接拿来用就可以了,脱离了一行又一行垒代码的繁琐的工作,以下的开源 ...
python财务报表预测股票价格_机器学习股票价格预测从爬虫到预测-数据爬取部分...
声明:本文已授权公众号「AI极客研修站」独家发布前言各位朋友大家好,小之今天又来给大家带来一些干货了.上篇文章机器学习股票价格预测初级实战是我在刚接触量化交易那会,因为苦于找不到数据源,所以找的一 ...
前端前端开发工程师_我们庞大的工程师团队会使用此前端开发指南
前端前端开发工程师 by Yangshun Tay 阳顺泰我们庞大的工程师团队会使用此前端开发指南 (Our large team of engineers use this front end d ...

python前端图表框架_图表highcharts联合jquery ajax 后端取数据前端图表渲染

python前端图表框架_图表highcharts联合jquery ajax 后端取数据前端图表渲染相关推荐

最新文章

热门文章