HighCharts详细折线图,柱状图,饼图
HighCharts-教程+例子

HighCharts-教程+例⼦Highchart简介:Highcharts是⼀款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web⽹站或Web应⽤中添加交互性的图表,Highcharts⽬前⽀持直线图、曲线图、⾯积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满⾜你对Web图表的任何需求!Highcharts功能强⼤,图表种类多也很漂亮,⾼度⾃定义,兼容性⽐较好。
具体参考:使⽤准备:1.在官⽹上找到下载链接即可,其中有3个下载项,highchart为主要的,后⾯两个,highmaps是主题为地图的⼀些图表。
highstock是主题为股票的⼀些折线图,是⼀些⾏业定制化的⼯具2.使⽤highchart需要两个⽂件⼀个是基础的jquery(jquery建议1.8.2版本)或者prototype等js框架,以及highcharts.js。
可以在线引⽤,但是可能不太稳定,建议本地引⽤。
需要在移动端使⽤的时候,考虑这个。
另外图表导出等⾼级功能,需要额外引⼊exporting.js 等⽂件。
HelloWorld1.创建div容器,图表将在这个容器⾥画出来,需要制定id,style长宽样式需要制定。
<div id="container" style="min-width:800px;height:400px"></div>2.先引⼊jquery.js,最好1.8.2版本;highchart.js,因为后者基于前者,所以顺序不能颠倒。
3.使⽤script包含js代码,记住 type="text/javascript" 需要指定,以免出问题。
4.写代码,代码可以放在$(function(){ });中,也可以放在ajax的回调函数⾥,总之要保证执⾏到。
$('#container').highcharts({ //图表展⽰容器,与div的id保持⼀致chart: {type: 'column' //指定图表的类型,默认是折线图(line)},title: {text: 'My first Highcharts chart' //指定图表标题},xAxis: {categories: ['my', 'first', 'chart'] //指定x轴分组},yAxis: {title: {text: 'something' //指定y轴的标题}},series: [{ //指定数据列name: 'Jane', //数据列名data: [1, 0, 4] //数据}, {name: 'John',data: [5, 7, 3]}]});highchart的代码,都是json形式的,易于理解和开发,数据也可以⽤json来填充,下⾯举个⾃⼰做的例⼦看⼀看。
数据可视化表达的呈现类型 -回复

数据可视化表达的呈现类型-回复“数据可视化表达的呈现类型”数据可视化是指将庞大的、抽象的数据通过图像方式进行呈现和解释的过程。
它能够将数据转化为易于理解和解读的形式,帮助人们更好地理解和利用数据。
在数据可视化中,不同的图表类型有着不同的用途和适用场景。
本文将详细介绍数据可视化的常见图表类型,并分析它们的特点和应用场景。
1. 饼图(Pie Chart)饼图是将数据按照百分比在一个圆形中分成多个扇区,用于展示各个部分在整体中的比例关系。
饼图适用于展示占比关系,如市场份额、人口比例等。
它的优点是直观、易于理解,但不适合展示过多的部分和较小的比例。
2. 柱状图(Bar Chart)柱状图使用垂直或水平的长方形柱表示数据的数量或数值,用于比较不同项目之间的差异或关系。
柱状图适用于展示不同类别的数据,并能够清晰地对比各个项目的差异。
它的优点是简单直观、易于比较,适用于大多数数据类型。
3. 折线图(Line Chart)折线图用连续的线段连接各个数据点,用于展示数据随时间或其他变量的变化趋势。
折线图适用于观察变量随时间变化的趋势,并可用于比较多个变量的变化趋势。
它的优点是能够显示数据的趋势和周期性规律。
4. 散点图(Scatter Plot)散点图使用坐标系中的点表示数据的两个变量间的关系,用于观察变量之间的相关性。
散点图适用于展示两个变量之间的关系,并可用于发现异常值和趋势。
它的优点是能够显示数据的分布情况,但不适合展示大量数据点。
5. 气泡图(Bubble Chart)气泡图是散点图的一种变体,除了使用点表示数据外,还通过点的大小来表示另一个变量的值。
气泡图适用于展示三个变量之间的关系,并可以通过点的大小和颜色来表示不同维度的数据。
它的优点是能够同时展示多个指标之间的关系。
6. 热力图(Heat Map)热力图使用颜色渐变来表示数据的密度和分布情况,用于展示数据的热度分布。
热力图适用于较大数据集的展示,能够清晰地显示不同区域的数据密度和趋势。
Excel数据分析中常用的统计图表类型与应用场景

Excel数据分析中常用的统计图表类型与应用场景统计图表是Excel数据分析中非常重要的工具,通过可视化的方式将数据呈现出来,能够更加直观地理解和分析数据。
本文将介绍Excel 数据分析中常用的统计图表类型及其应用场景。
一、折线图(Line Chart)折线图用于显示数据随时间或其他连续变量而变化的趋势。
它适用于分析数据的趋势、周期性变化、季节性变化等。
例如,假设需要分析某公司每月销售额的变化情况,可以使用折线图将每个月的销售额数据进行可视化展示,以便更好地了解销售额的趋势。
二、柱状图(Column Chart)柱状图用于比较不同类别的数据之间的差异。
它适用于展示不同类别的数据在同一维度上的比较情况。
例如,某公司的销售额需要与竞争对手进行比较,可以使用柱状图将两家公司的销售额数据进行对比,以便更好地了解两家公司之间的销售情况。
三、饼图(Pie Chart)饼图用于显示不同类别的数据在整体中的占比情况。
它适用于展示数据的相对比例和比例的变化。
例如,某公司的市场份额需要与其他竞争对手进行比较,可以使用饼图将各家公司的市场份额进行可视化展示,以便更好地了解每家公司在整体市场中的占比情况。
四、散点图(Scatter Chart)散点图用于显示两个变量之间的关系。
它适用于寻找变量之间的相关性、观察异常值等。
例如,某公司想要了解广告投入与销售额的关系,可以使用散点图将广告投入和销售额的数据进行可视化展示,以便更好地观察二者之间的关系。
五、雷达图(Radar Chart)雷达图用于比较多个变量在同一维度上的表现。
它适用于展示多个变量之间的对比情况。
例如,某公司的产品需要与其他竞争对手的产品进行比较,可以使用雷达图将各个产品的性能指标进行可视化展示,以便更好地了解各个产品之间的差异。
六、箱线图(Box Plot)箱线图用于展示数据的分布情况,包括数据的中位数、四分位数、离群值等。
它适用于分析数据的集中趋势、离散程度等。
数据可视化(Echart):柱状图、折线图、饼图等六种基本图表的特点及适用场合

数据可视化(Echart):柱状图、折线图、饼图等六种基本图表的特点及适⽤场合数据可视化(Echart)柱状图、折线图、饼图等六种基本图表的特点及适⽤场合效果图源码<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts</title><!-- 引⼊ echarts.js --><script src="js/echarts.min.js"></script></head><body><!-- 为ECharts准备⼀个具备⼤⼩(宽⾼)的Dom --><div id="main" style="width: 600px;height:400px;"></div><div id="main2" style="width: 600px;height:400px;left: 700px;top: 0px;position: absolute;"></div><div id="main3" style="width: 600px;height:400px;left: 0px;top: 400px;position: absolute;"></div><div id="main4" style="width: 600px;height:400px;left: 700px;top: 400px;position: absolute;"></div><script type="text/javascript">//模拟后台传来的jsonvar jsondata ='{"sales":[{"name":"衬衫","num":"70"},{"name":"⽺⽑衫","num":"27"},{"name":"裤⼦","num":"36"},{"name":"⾼跟鞋","num":"18"},{"name":"袜⼦","num":"85"},{"name":"棉袄","num":"105"}]}';var jsonobj = JSON.parse(jsondata);//获取json中的数值var dataName = [];var dataNum = [];var temp = jsonobj;//匿名函数解析json串中的数值,关键点(function() {for(var i = 0; i < temp.sales.length; i++) {dataName.push(temp.sales[i].name);dataNum.push(temp.sales[i].num);}})();// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var myChart2 = echarts.init(document.getElementById('main2'));//折线图var option = {title: {text: '⾐物销量统计'},tooltip: {},legend: {data: ['销量']},xAxis: {//x轴字体颜⾊/*axisLine: {lineStyle: {color: '#C50023'}},*/data: dataName,},yAxis: [{//定义y轴最⼤与最⼩值min: 0,max: 120,type: 'value',name: '⽇销量(万)',splitNumber: 5}],series: [{//折线上数字/* label: {normal: {show: true,position: 'top',formatter:100}},*/// 折线颜⾊/*itemStyle: {normal: {//线上。
Excel图表应用篇:三大基础图表——饼图、柱形图与折线图

Excel图表应用篇:三大基础图表——饼图、柱形图与折线图Excel是一个强大的工具,用于记录、计算和分析数据,那如何将这些数据与数据背后的洞见以更加直观的方式,展示给我们所在机构的内部人员以及有业务联系的外部人员,此时就需要用到Excel的图表功能。
一张图表往往是总结数据趋势最有力的方式,这也是我们必须要了解图表的原因。
在Excel的主界面,我们点击菜单栏的“插入”选项卡,在“图表”区域可以看到有诸多的图表可供选择。
01饼图我们先来看一下饼图。
当我们要添加一个图表时,先选中要转换成图表的数据,例如选中A3至E4单元格区域(这是名为“Aanya Zhang”的Acct Manager 各个季度的销售数据),我们在选择数据时,同时也选择了数据表格的首行标题或抬头。
点击“图表”区域的饼图下拉选项,选择“二维饼图”。
当鼠标放在某个图表时,在Excel的工作表中会实时展现该图表的预览,只有点击目标图表之后,才会在工作表中添加。
如果我们要用饼图展现各个Acct Manager在第一季度的销售业绩的不同表现,我们可以先选中数据表格的前两列(A3至B17单元格区域),再选择“二维饼图”。
如果我们想要展现各个Acct Manager在第一第二两个季度的销售业绩的不同展现,使用“二维饼图”就不再能达到所需的效果,因为此饼图只能展示单个系列的数据。
02柱形图我们来看一下柱形图如何展现多个系列的数据。
先选中数据表格的前三列数据(A3至C17单元格区域)。
点击“插入”选项卡下的柱形图或条形图下拉选项,选择“柱形图”。
在柱形图中,我们可以清楚对比各个Acct Manager两个季度销售数据的对比。
如果选择要看各个Acct Manager三个季度甚至四个季度的销售数据,我们无需再重新选中数据,插入柱形图,而是在上图的基础上,鼠标放在C17单元格的右下角变成一个填充图标时,向右拖拽选中第三季度的数据,然后放开鼠标,柱形图即可自动添加第三季度销售数据。
pyecharts 种类

pyecharts 种类
Pyecharts是一个基于Echarts的Python可视化库,它提供了
多种不同类型的图表,可以满足用户在数据可视化方面的多样化需求。
以下是Pyecharts库中常用的图表种类:
1. 折线图(Line),用于展示数据随时间或其他连续变量的变
化趋势,可以比较不同数据的变化情况。
2. 柱状图(Bar),用于比较不同类别数据的大小或者变化趋势,可以展示数据的对比情况。
3. 饼图(Pie),用于展示各部分占总体的比例,可以直观地
看出数据的分布情况。
4. 散点图(Scatter),用于展示两个变量之间的关系,可以
观察数据的分布规律和异常值。
5. 地图(Map),用于展示地理数据或者区域数据的分布情况,可以直观地展示数据在地图上的分布情况。
6. 热力图(HeatMap),用于展示数据在不同维度上的密集程度,可以直观地展示数据的热度分布情况。
7. 漏斗图(Funnel),用于展示数据在不同阶段的变化情况,可以观察数据在不同阶段的流失情况。
除了以上列举的图表种类外,Pyecharts还提供了其他一些特殊类型的图表,如K线图、雷达图等,用户可以根据自己的需求选择合适的图表类型来进行数据可视化。
总的来说,Pyecharts提供了丰富多样的图表种类,可以满足用户在数据可视化方面的各种需求。
High-speedChartingControl--MFC绘制图表(折线图、饼图、柱形图)控件讲解
High-speed Charting Control--MFC绘制图表(折线图、饼图、柱形图)控件介绍对于我之前的一个项目,我需要在图表控件上显示连续的数据流。
我决定开发自己的控件,因为我找不到任何可以提供所需灵活性的自由软件控件。
其中一个主要的限制是,控件必须绘制大量的数据,并能够迅速显示它(在Pocket PC上)。
控件能够通过仅绘制新的数据点而不是完整的数据序列来做到这一点并且图表还能够显示静态数据。
这种控件是我长时间工作的结果,而且费尽周折地为了提供足够的灵活性来供需要它的人使用。
对于使用者反馈我表示由衷的感谢:一个邮件,留言板中的一一句话或只是对本文评级。
当我不知道是否还有人使用它时,我就没有必要维护这个控件了。
免责声明这个控件是我花费很长时间的开发的结果,因此我对代码的使用放置一些小条件:该代码可以以编译的形式用于任何非商业和商业目的。
代码可以被重新开发,只要它提供作者名字和完整的免责声明。
更改源代码需要得到作者的同意。
此代码不提供任何安全保证。
我不会对使用此代码造成的损失负责。
使用它需要自己承担风险。
This code may be used for any non-commercialand commercial purposes in a compiled form.The code may be redistributed as long as it remainsunmodified and providing that the author nameand the disclaimer remain intact. The sourcescan be modified with the author consent only.This code is provided without any guarantees.I cannot be held responsible for the damage orthe loss of time it causes. Use it at your own risks.鉴于开发这个控件所付出的努力,下面的要求并不过分:如果你在在商业应用程序中使用这个控件,那么请给我发邮件让我知道。
数据可视化中的表类型选择指南
数据可视化中的表类型选择指南数据可视化是现代数据分析和展示的重要工具之一,它能够将庞大的数据转化为直观、易于理解的图表和图形。
而在进行数据可视化时,选择适合的表类型是至关重要的,它会影响到数据传达的效果和观众的理解。
本文将为您介绍数据可视化中常用的表类型,并提供选择指南,帮助您在数据可视化项目中做出明智的决策。
一、柱状图(Bar Chart)柱状图是最常见的数据可视化表类型之一。
它用于比较不同类别的数据,将数据以长方形柱子的形式展示出来。
柱状图适合用于展示离散的数据,比如不同产品的销售额或不同城市的人口数量。
您可以选择垂直或水平的柱状图,具体取决于数据的呈现方式和可读性要求。
二、折线图(Line Chart)折线图常用于展示数据随时间变化的趋势。
它通过将数据点连接起来形成一条折线,清楚地展示出数据的趋势和波动。
折线图适合于展示连续的数据,比如股票价格的变化或气温的波动。
使用折线图可以使观众更好地理解数据的变化趋势,并更准确地预测未来的发展。
三、散点图(Scatter Plot)散点图用于展示两个变量之间的关系。
它通过在平面上绘制出多个数据点,其中横轴代表一个变量,纵轴代表另一个变量。
散点图适合用于探索数据之间的相关性和趋势。
例如,您可以使用散点图来展示身高与体重之间的关系,以及收入与教育程度之间的关系。
通过观察散点图,您可以发现数据之间的关联关系,帮助您做出相应的决策。
四、饼图(Pie Chart)饼图适用于展示数据的相对比例和构成。
它通过将数据分割成不同大小的扇形区域,表示不同类别的数据占据整体的比例。
饼图常用于展示销售份额、人口组成和资源分配等方面。
然而,饼图在表示大量数据时可能不够清晰明了,因此在选择时需要考虑数据的复杂性和可读性。
五、热力图(Heatmap)热力图用颜色的变化来展示数据的密度和分布情况。
它可以同时展示两个变量之间的关系和随时间的变化。
热力图常用于展示地理数据、生物数据、金融数据等多维数据。
HighCharts详细折线图,柱状图,饼图
/***折线图***/function ClientLivSelect(){var organizationname = $("#organizationname").val();var year = $("#year option:selected").text();var issuccess = $("#issuccess option:selected").text();//alert(year);var d = new Date();var vYear = d.getFullYear();var vMonth = d.getMonth()+1;if(year == '年份'){year = vYear;}$.ajax({type:"post",url : '../LogManager/ClientLivSelect',dataType : "json",data :{Year:year,OrganizationName:organizationname,isSuccess:issuccess},error : function() {alert("error");},success : function(data) {// var str = [0,0,0,0,0,0,0,0,0,0,0,0];// $.each(data, function(c, item) {// str[item.imonth-1] = item.cou_mon;// });if(data == 1){alert("登录超时,请重新登录");window.parent.location.href = "../login.jsp";}var str = new Array();//存放纵坐标if(year == vYear){for (var int = 1; int <= vMonth; int++) {str.push(0);}alert(vMonth);}else{str = [0,0,0,0,0,0,0,0,0,0,0,0];}var xstr = [];var xtitle;var ytitle;$.each(data, function(c, item) {str[item.imonth-1] = item.cou_mon;xstr = item.month;xtitle = item.xtitle;ytitle = item.ytitle;});drawRzhBIG(str,year);}});}function drawRzhBIG(str,year) {alert(str);new Highcharts.Chart({chart: {renderTo: 'container', //图表放置的容器,DIVdefaultSeriesType: 'line', //图表类型line(折线图),zoomType: 'x' //x轴方向可以缩放},credits: {enabled: false //右下角不显示LOGO},title: {text: '日志异常数据抽取统计图' //图表标题},// subtitle: {// text: '2011年' //副标题// },xAxis: { //x轴 json.xDate categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', //数据取出来的'11月', '12月'], //x轴标签名称gridLineWidth: 1, //设置网格宽度为1lineWidth: 2, //基线宽度// labels:{y:20} //x轴标签位置:距X轴下方26像素},yAxis: { //y轴title: {text: '数量'}, //标题lineWidth: 2 //基线宽度},tooltip: {valueSuffix: '°C'},plotOptions:{ //设置数据点line:{dataLabels:{enabled:true //在数据点上显示对应的数据值},enableMouseTracking: false //取消鼠标滑向触发提示框}},// legend: { //图例// layout: 'horizontal', //图例显示的样式:水平(horizontal)/垂直(vertical)// backgroundColor: '#ffc', //图例背景色// align: 'left', //图例水平对齐方式// verticalAlign: 'center', //图例垂直对齐方式// x: 100, //相对X位移// y: 70, //相对Y位移// floating: false, //设置可浮动// shadow: true //设置阴影// },exporting: {enabled: false //设置导出按钮不可用},series: [{ //数据列显示两条线name: year+"年", //json.rzhMaxdata: str //显示值取出来的}]});//});}/***柱状图***/function ClientParSelect(){var organizationname = $("#organizationname").val();var year = $("#year option:selected").text();var issuccess = $("#issuccess option:selected").text();alert("1111");var d = new Date();var vYear = d.getFullYear();var vMonth = d.getMonth();if(year == "年份"){year = vYear;alert(year);}$.ajax({type:"post",url:'../LogManager/ClientLivSelect',dataType: "json",data:{Year:year,OrganizationName:organizationname,isSuccess:issuccess},error:function(){alert("error");},success:function(data){if(data == 1){alert("登录超时,请重新登录");window.parent.location.href = "../login.jsp";}var str = new Array();//存放纵坐标if(year == vYear){for (var int = 1; int <= vMonth; int++) {str.push(0);}alert(vMonth);}else{str = [0,0,0,0,0,0,0,0,0,0,0,0];}var xstr = [];var xtitle;var ytitle;$.each(data, function(c, item) {str[item.imonth-1] = item.cou_mon;xstr = item.month;xtitle = item.xtitle;ytitle = item.ytitle;});drawParBIG(str,year,xstr,xtitle,ytitle);}});}function drawParBIG(str,year,xstr,xtitle,ytitle) {// $(function () {$('#container').highcharts({chart: {type: 'column'},title: {text: xtitle //title},// subtitle: {// text: 'Source: ' //副title// },xAxis: { //x轴categories: xstr},yAxis: { //y轴// min: 0,lineWidth: 1 ,title: {text: ytitle //y轴 title}},tooltip: {headerFormat: '<spanstyle="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><tdstyle="color:{series.color};padding:0">{}: </td>' + //'<tdstyle="padding:0"><b>{point.y}</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {column: {dataLabels:{enabled:true, //是否显示数据标签pointPadding: 0.2,borderWidth: 0}}},series: [{name: year + '年',data: str}]});// });}/***饼图**/function ClientPieSelect(){var organizationname = $("#organizationname").val();var year = $("#year option:selected").text();var issuccess = $("#issuccess option:selected").text();alert("1111");var d = new Date();var vYear = d.getFullYear();var vMonth = d.getMonth()+1;if(year == "年份"){year = vYear;alert(year);}$.ajax({type:"post",url:'../LogManager/ClientLivSelect',dataType: "json",data:{Year:year,OrganizationName:organizationname,isSuccess:issuccess},error:function(){alert("error");},success:function(data){if(data == 1){alert("登录超时,请重新登录");window.parent.location.href = "../login.jsp";}var str = new Array();//存放纵坐标if(year == vYear){for (var int = 1; int <= vMonth; int++) {str.push(0);}alert(vMonth);}else{str = [0,0,0,0,0,0,0,0,0,0,0,0];}var xstr = [];var xtitle;var ytitle;$.each(data, function(c, item) {str[item.imonth-1] = item.cou_mon;xstr = item.month;xtitle = item.xtitle;ytitle = item.ytitle;});var pieArr = [];for (var i = 0; i < xstr.length; i++) {var subArr = [];subArr.push(xstr[i]);subArr.push(str[i]);pieArr.push(subArr);}alert(pieArr);drawPieBIG(year,xtitle,pieArr);}});}function drawPieBIG(year,xtitle,pieArr) {//$(function () {// Make monochrome colors and set them as default for all pies Highcharts.getOptions().plotOptions.pie.colors = (function () { var colors = [],base = Highcharts.getOptions().colors[0];for (var i = 0; i < 10; i++) {// Start out with a darkened base color (negative brighten), and end// up with a much brighter colorcolors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());}return colors;}());// Build the chart$('#container').highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false},title: {text: xtitle},tooltip: {pointFormat: '{}:<b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{}</b>:{point.percentage:.1f} %',style: {color: (Highcharts.theme &&Highcharts.theme.contrastTextColor) || 'black'}}}},series: [{type: 'pie',name: year+'年',data: pieArr //数组 }]});//});}。
echarts图表类型
echarts图表类型Echarts是一款开源绘图工具,它拥有丰富而精致的图表类型,可以用于数据可视化、数据分析,以及数据可视化交互等。
本文将简要介绍Echarts支持的常见图表类型。
Echarts提供了许多不同类型的图表,可以满足各种数据可视化需求。
下面介绍的是Echarts的主要图表类型:1、折线图:折线图是一种常用的图表类型,用于研究一组数据随时间变化的情况。
它可以表示两个或多个变量间的关系。
2、柱状图:柱状图是一种常用的图表类型,用于表示一组数据中不同分类的数量或频率,这种图表可以有效地表现出不同分类的比例关系。
3、饼状图:饼状图是一种常见的图表类型,用于表示一个数据集中每一部分数据的比例,这种图表通常用于展示各种财务比例分布的情况。
4、散点图:散点图是一种常用的图表类型,用于说明变量之间的关系,表示每一对数据之间的关系,它可以帮助我们快速确定某种变量之间是否存在着非线性关系。
5、条形图:条形图是一种常见的图表类型,用于展示各种分类间不同类别的数据分布情况,它可以帮助我们可视化每一组数据的数量和比例关系。
6、雷达图:雷达图是一种常用的图表类型,它可以表示一组数据中不同变量之间的关系,可以有效地展示多个维度的数据的分布情况。
7、气泡图:气泡图是一种常用的图表类型,用于可视化一组有多个变量的数据,它可以帮助我们更好地理解这些变量之间的关系。
8、热力图:热力图是一种常用的图表类型,用于可视化地理数据,可以以热力图的形式展示数据在地理位置上的分布情况,帮助我们更好地理解数据的分布情况。
此外,Echarts还支持桑基图、线性图、K线图、堆叠图等图表类型。
除此之外,Echarts还提供多种图表类型的交互功能,比如悬停提示、图表缩放、图表修改、图表分组等,可以满足不同数据可视化场景的需求。
总而言之,Echarts提供了丰富而多样的图表类型,它们可以用于数据可视化、数据分析及数据可视化交互,帮助用户更好地理解数据的分布情况。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
/***折线图***/function ClientLivSelect(){var organizationname = $("#organizationname").val();var year = $("#year option:selected").text();var issuccess = $("#issuccess option:selected").text();//alert(year);var d = new Date();var vYear = d.getFullYear();var vMonth = d.getMonth()+1;if(year == '年份'){year = vYear;}$.ajax({type:"post",url : '../LogManager/ClientLivSelect',dataType : "json",data :{Year:year,OrganizationName:organizationname,isSuccess:issuccess},error : function() {alert("error");},success : function(data) {// var str = [0,0,0,0,0,0,0,0,0,0,0,0];// $.each(data, function(c, item) {// str[item.imonth-1] = item.cou_mon;// });if(data == 1){alert("登录超时,请重新登录");window.parent.location.href = "../login.jsp";}var str = new Array();//存放纵坐标if(year == vYear){for (var int = 1; int <= vMonth; int++) {str.push(0);}alert(vMonth);}else{str = [0,0,0,0,0,0,0,0,0,0,0,0];}var xstr = [];var xtitle;var ytitle;$.each(data, function(c, item) {str[item.imonth-1] = item.cou_mon;xstr = item.month;xtitle = item.xtitle;ytitle = item.ytitle;});drawRzhBIG(str,year);}});}function drawRzhBIG(str,year) {alert(str);new Highcharts.Chart({chart: {renderTo: 'container', //图表放置的容器,DIVdefaultSeriesType: 'line', //图表类型line(折线图),zoomType: 'x' //x轴方向可以缩放},credits: {enabled: false //右下角不显示LOGO},title: {text: '日志异常数据抽取统计图' //图表标题},// subtitle: {// text: '2011年' //副标题// },xAxis: { //x轴 json.xDate categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', //数据取出来的'11月', '12月'], //x轴标签名称gridLineWidth: 1, //设置网格宽度为1lineWidth: 2, //基线宽度// labels:{y:20} //x轴标签位置:距X轴下方26像素},yAxis: { //y轴title: {text: '数量'}, //标题lineWidth: 2 //基线宽度},tooltip: {valueSuffix: '°C'},plotOptions:{ //设置数据点line:{dataLabels:{enabled:true //在数据点上显示对应的数据值},enableMouseTracking: false //取消鼠标滑向触发提示框}},// legend: { //图例// layout: 'horizontal', //图例显示的样式:水平(horizontal)/垂直(vertical)// backgroundColor: '#ffc', //图例背景色// align: 'left', //图例水平对齐方式// verticalAlign: 'center', //图例垂直对齐方式// x: 100, //相对X位移// y: 70, //相对Y位移// floating: false, //设置可浮动// shadow: true //设置阴影// },exporting: {enabled: false //设置导出按钮不可用},series: [{ //数据列显示两条线name: year+"年", //json.rzhMaxdata: str //显示值取出来的}]});//});}/***柱状图***/function ClientParSelect(){var organizationname = $("#organizationname").val();var year = $("#year option:selected").text();var issuccess = $("#issuccess option:selected").text();alert("1111");var d = new Date();var vYear = d.getFullYear();var vMonth = d.getMonth();if(year == "年份"){year = vYear;alert(year);}$.ajax({type:"post",url:'../LogManager/ClientLivSelect',dataType: "json",data:{Year:year,OrganizationName:organizationname,isSuccess:issuccess},error:function(){alert("error");},success:function(data){if(data == 1){alert("登录超时,请重新登录");window.parent.location.href = "../login.jsp";}var str = new Array();//存放纵坐标if(year == vYear){for (var int = 1; int <= vMonth; int++) {str.push(0);}alert(vMonth);}else{str = [0,0,0,0,0,0,0,0,0,0,0,0];}var xstr = [];var xtitle;var ytitle;$.each(data, function(c, item) {str[item.imonth-1] = item.cou_mon;xstr = item.month;xtitle = item.xtitle;ytitle = item.ytitle;});drawParBIG(str,year,xstr,xtitle,ytitle);}});}function drawParBIG(str,year,xstr,xtitle,ytitle) {// $(function () {$('#container').highcharts({chart: {type: 'column'},title: {text: xtitle //title},// subtitle: {// text: 'Source: ' //副title// },xAxis: { //x轴categories: xstr},yAxis: { //y轴// min: 0,lineWidth: 1 ,title: {text: ytitle //y轴 title}},tooltip: {headerFormat: '<spanstyle="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><tdstyle="color:{series.color};padding:0">{}: </td>' + //'<tdstyle="padding:0"><b>{point.y}</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {column: {dataLabels:{enabled:true, //是否显示数据标签pointPadding: 0.2,borderWidth: 0}}},series: [{name: year + '年',data: str}]});// });}/***饼图**/function ClientPieSelect(){var organizationname = $("#organizationname").val();var year = $("#year option:selected").text();var issuccess = $("#issuccess option:selected").text();alert("1111");var d = new Date();var vYear = d.getFullYear();var vMonth = d.getMonth()+1;if(year == "年份"){year = vYear;alert(year);}$.ajax({type:"post",url:'../LogManager/ClientLivSelect',dataType: "json",data:{Year:year,OrganizationName:organizationname,isSuccess:issuccess},error:function(){alert("error");},success:function(data){if(data == 1){alert("登录超时,请重新登录");window.parent.location.href = "../login.jsp";}var str = new Array();//存放纵坐标if(year == vYear){for (var int = 1; int <= vMonth; int++) {str.push(0);}alert(vMonth);}else{str = [0,0,0,0,0,0,0,0,0,0,0,0];}var xstr = [];var xtitle;var ytitle;$.each(data, function(c, item) {str[item.imonth-1] = item.cou_mon;xstr = item.month;xtitle = item.xtitle;ytitle = item.ytitle;});var pieArr = [];for (var i = 0; i < xstr.length; i++) {var subArr = [];subArr.push(xstr[i]);subArr.push(str[i]);pieArr.push(subArr);}alert(pieArr);drawPieBIG(year,xtitle,pieArr);}});}function drawPieBIG(year,xtitle,pieArr) {//$(function () {// Make monochrome colors and set them as default for all pies Highcharts.getOptions().plotOptions.pie.colors = (function () { var colors = [],base = Highcharts.getOptions().colors[0];for (var i = 0; i < 10; i++) {// Start out with a darkened base color (negative brighten), and end// up with a much brighter colorcolors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());}return colors;}());// Build the chart$('#container').highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false},title: {text: xtitle},tooltip: {pointFormat: '{}:<b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{}</b>:{point.percentage:.1f} %',style: {color: (Highcharts.theme &&Highcharts.theme.contrastTextColor) || 'black'}}}},series: [{type: 'pie',name: year+'年',data: pieArr //数组 }]});//});}。