highcharts 使用

最新推荐文章于 2022-10-28 13:09:11 发布
最新推荐文章于 2022-10-28 13:09:11 发布
阅读量1.1k 收藏
点赞数
分类专栏： web 文章标签： highcharts 图表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackieLiuLixi/article/details/38011387
版权 
<%@ page contentType="text/html;charset=GBK"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>" />
<%@ include file="../../include/heard.inc"%>
<link rel="stylesheet" type="text/css" href="./js/xyTree/resources/css/yui-ext.css" />
<link rel="stylesheet" href="./js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
<script type="text/javascript" src="./js/xyTree/util/utilities_2.1.0.js"></script>
<script type="text/javascript" src="./js/xyTree/util/yui-ext.js"></script>
<script language="javascript" src="./js/xyTree/js/dialog.js"></script>
<script type="text/javascript" src="./js/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="./js/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="./js/ztree/js/jquery.ztree.exedit-3.5.js"></script>
<script src="./js/highchart/highcharts.js"></script>
<script src="./js/highchart/modules/exporting.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	zTree1 = jQuery.fn.zTree.init(jQuery('#tree_area'), setting, zNodes);
});
</script>
<script type="text/javascript">
//区划树
var zTree1;
var setting;
var zNodes = [<s:property value='questionnaireIdentityInfoJson' escape='false' />]; 
// 控制按钮显示
var setting = {
	data: {simpleData: {enable: true}},
	callback: {
		onDblClick: treeOnDblClick
	},
	view: {fontCss : {color:"black"}}
};


function treeOnDblClick(event, treeId, treeNode) {//双击节点完成选择
	if(treeNode == null)
		return;
	jQuery("#indenId").val(treeNode.id);
	jQuery("#queIdenDictName").val(treeNode.name);
	//清理选择对象信息
	document.getElementById('checkIdValue').value = '';
	document.getElementById('checkNameValue').value = '';
	jQuery("#m-areaTree").click();
}
</script>
<script type="text/javascript">
function initPapersPersonInfoList() {
	var title = jQuery("#queIdenDictName").val();
	var queId = jQuery("#queId").val();
	var indenId = jQuery("#indenId").val();
	var diag = new Dialog();
	diag.Width =700;
	diag.Height =600;
	diag.Title = title;
	diag.URL = '<%=basePath%>initPapersPersonInfoList.action?queId='+queId+'&indenId='+indenId;
	diag.show();
}
</script>
<script>
function check() {
	if(jQuery.trim(jQuery("#queIdenDictName").val())==''){
		Dialog.alertFocus("信息选择不能为空！",'queIdenDictName');
		return false;
	}
	if(jQuery.trim(jQuery("#checkNameValue").val())==''){
		Dialog.alertFocus("比较对象不能为空！",'checkNameValue');
		return false;
	}
	document.form1.submit();
}
</script>


<script>
//图表切换
function showOrDisplay(id){
	var arrId = ['container1','container2','container3','listTab1'];
	for(var i=0; i <arrId.length;i++) {
		if(arrId[i] != id)
			document.getElementById(arrId[i]).style.display = 'none';
		else
			document.getElementById(arrId[i]).style.display = '';
	}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
	$("#listTab1 tr:odd").addClass("alt");
	$(".listTab tr:not(first,second)").hover(function(){$(this).addClass("over")},function(){$(this).removeClass("over")});
})
/*柱状图*/
$(function () {
	//横坐标
	var categories = new Array();
	var value1= new Array();
	var name = '平均分';
	
	<s:iterator value="hashtableQueNumList" status="st">
		categories[<s:property value="#st.index"/>]='<s:property value="CHECKNAME_VALUE" escape="false"/>'
		value1[<s:property value="#st.index"/>]=<s:property value="AVGSCORE"/>
	</s:iterator>
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container2',
                type: 'column',
            },
            lang: {  
                printChart: "打印",
                downloadJPEG: "", 
                downloadPDF: "" , 
                downloadPNG: "导出图片" , 
                downloadSVG: "", 
     		},
     		 exporting:{  
                 filename:'平均分柱状图',  
                 sourceWidth: 900,
     			 sourceHeight: 600,
                 url:'<%=basePath%>SaveAsImage'
             }, 
            title: {
                text: name
            },
            xAxis: {
                categories: categories,
               	labels: {
               	   	rotation: -65,
               	   	align: 'right',
               		style: { 
               			fontSize: '13px'
               		}
               	 },
               	y:23
            },
            yAxis: {
            	allowDecimals:true,
                min: 0,
                title: {
                    text: ''
                }
            },
            legend: {
            	enabled: false,
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +'</b>';
                    return s;
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.0f}'
                    }
                }
            },
              series: [{
              name: name,
              color: 'white',
              colorByPoint: true,
              data: value1
          }]
        });
    });
    
});






//折线图
$(function () {
	var xAxis = new Array();
	var data = new Array();
	var name = '平均分';
	<s:iterator value="hashtableQueNumList" status="st">
		xAxis[<s:property value="#st.index"/>] = '<s:property value="CHECKNAME_VALUE" escape="false"/>';
		data[<s:property value="#st.index"/>] = <s:property value="AVGSCORE"/>;
	</s:iterator>
	
    var chart2;
    $(document).ready(function() {
        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container3',
                type: 'line'
            },
			lang: {  
                 printChart: "打印",
                 downloadJPEG: "", 
                 downloadPDF: "" , 
                 downloadPNG: "导出图片" , 
                 downloadSVG: "", 
      		},
      		exporting:{  
                filename:'平均分',  
                sourceWidth: 900,
    			 sourceHeight: 600,
               url:'<%=basePath%>SaveAsImage'
            }, 
            title: {
                text: name
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: xAxis,
                labels: {
               	   	rotation: -65,
               	   	align: 'right',
               		style: { 
               			fontSize: '13px'
               		}
               	 },
               	y:23
            },
            yAxis: {
                title: {
                    text: ''
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'';
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        format: '{point.y:.0f}'
                    }
                }
            },
            legend: {
            	enabled: false,
            },
            series: [{
				name:name,
                data: data
            }]
        });
    });
    
});
                          
</script>
<script type="text/javascript">
/*饼状图*/
$(function () {
	var data = new Array();
	var count = 0;
	//<s:iterator value="hashtableQueNumList" status="st">
		//count += parseFloat('<s:property value="AVGSCORE"/>');
	//</s:iterator>
	//alert(count);
	<s:iterator value="hashtableQueNumList" status="st">
		var value1= new Array();//值
		value1[0]='<s:property value="CHECKNAME_VALUE" escape="false"/>';
		//value1[1]=(parseFloat('<s:property value="AVGSCORE"/>')/count * 100);
		value1[1]=(parseFloat('<s:property value="AVGSCORE"/>'));
		//alert(value1[1])
		data[<s:property value="#st.index"/>] = value1;
	</s:iterator>
    var chart2;
    
    $(document).ready(function () {
        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container1',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            lang: {  
                printChart: "打印",
                downloadJPEG: "", 
                downloadPDF: "" , 
                downloadPNG: "导出图片" , 
                downloadSVG: "", 
     		},
     		exporting:{  
               filename:'答卷数量比例饼状图',  
               sourceWidth: 900,
   			 sourceHeight: 600,
             url:'<%=basePath%>SaveAsImage'
            },
            title: {
                text: '答卷数量比例'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.y;
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.y;
                        }
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: name,
                data: data
            }]
        });
    });
    
});
</script>


<!-- 以下是第二个统计表格 -->


<script>
//图表切换
function showOrDisplay2(id){
	var arrId = ['container21','container22','container23','listTab21'];
	for(var i=0; i <arrId.length;i++) {
		if(arrId[i] != id)
			document.getElementById(arrId[i]).style.display = 'none';
		else
			document.getElementById(arrId[i]).style.display = '';
	}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
	$("#listTab21 tr:odd").addClass("alt");
	$(".listTab tr:not(first,second)").hover(function(){$(this).addClass("over")},function(){$(this).removeClass("over")});
})
/*柱状图*/
$(function () {
	//横坐标
	var categories = new Array();
	var optionName = new Array();
	//var value1 = new Array(new Array(),new Array());
	var x = <s:property value="hashtableQueAssessList.size" />
	var y = <s:property value="queryAssessInfoList.size" />
	var value1 = new Array();
	for(var i=0;i<x;i++){                //一维长度为10
		value1[i]=new Array();         //在声明二维
        for(var j=0;j<y;j++){             //二维长度为20
        	value1[i][j]="";
      }
   }
	
	var name = '平均分';
	<s:iterator value="queryAssessInfoList" status="st">
		categories[<s:property value="#st.index"/>]='<s:property value="assessName" escape="false"/>'
	</s:iterator>
	<s:iterator value="hashtableQueAssessList" status="st">
		optionName[<s:property value="#st.index"/>] = '<s:property value="CHECKNAME_VALUE" escape="false"/>'
		<s:iterator value="queryAssessInfoList" status="st1">
			//if (<s:property value="#st.index"/> == "1") {
				//alert(<s:property value="#st.index"/>)
				//alert(<s:property value="#st1.index"/>)
				//alert(<s:property value="hashtableQueAssessList[#st.index][\"assessInfo_\" + #st1.index]"/>)
				value1[<s:property value="#st.index"/>][<s:property value="#st1.index"/>]=<s:property value="hashtableQueAssessList[#st.index][\"assessInfo_\" + #st1.index]"/>
			//}
				</s:iterator>
	</s:iterator>
   	var seriesValue = new Array();
   	for (var i=0; i<optionName.length; i++) {
    	seriesValue[i] = new Object();
    	seriesValue[i].name = optionName[i];
    	seriesValue[i].data = value1[i];
   	}
    var chart;
    $(document).ready(function() {
    	
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container22',
                type: 'column',
            },
            lang: {  
                printChart: "打印",
                downloadJPEG: "", 
                downloadPDF: "" , 
                downloadPNG: "导出图片" , 
                downloadSVG: "", 
     		},
     		 exporting:{  
                 filename:'平均分柱状图',  
                 sourceWidth: 900,
     			 sourceHeight: 600,
                 url:'<%=basePath%>SaveAsImage'
             }, 
            title: {
                text: name
            },
            xAxis: {
                categories: categories,
               	labels: {
               	   	rotation: -65,
               	   	align: 'right',
               		style: { 
               			fontSize: '13px'
               		}
               	 },
               	title: {
                    text: '评估指标'
                },
               	y:23
            },
            yAxis: {
            	allowDecimals:true,
                min: 0,
                title: {
                    text: '平均得分'
                }
            },
            legend: {
            	enabled: false,
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.series.name +':<b>'+ this.y +'</b>';
                    return s;
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: seriesValue
        });
    });
    
});






//折线图
$(function () {
	var categories = new Array();
	var optionName = new Array();
	//var value1 = new Array(new Array(),new Array());
	var x = <s:property value="hashtableQueAssessList.size" />
	var y = <s:property value="queryAssessInfoList.size" />
	var value1 = new Array();
	for(var i=0;i<x;i++){                //一维长度为10
		value1[i]=new Array();         //在声明二维
        for(var j=0;j<y;j++){             //二维长度为20
        	value1[i][j]="";
      }
   }
	
	var name = '平均分';
	<s:iterator value="queryAssessInfoList" status="st">
		categories[<s:property value="#st.index"/>]='<s:property value="assessName" escape="false"/>'
	</s:iterator>
	<s:iterator value="hashtableQueAssessList" status="st">
		optionName[<s:property value="#st.index"/>] = '<s:property value="CHECKNAME_VALUE" escape="false"/>'
		<s:iterator value="queryAssessInfoList" status="st1">
			value1[<s:property value="#st.index"/>][<s:property value="#st1.index"/>]=<s:property value="hashtableQueAssessList[#st.index][\"assessInfo_\" + #st1.index]"/>
		</s:iterator>
	</s:iterator>
   	var seriesValue = new Array();
   	for (var i=0; i<optionName.length; i++) {
    	seriesValue[i] = new Object();
    	seriesValue[i].name = optionName[i];
    	seriesValue[i].data = value1[i];
   	}
   	
	var xAxis = new Array();
	var data = new Array();
	var name = '平均分';
	<s:iterator value="queryAssessInfoList" status="st">
		xAxis[<s:property value="#st.index"/>] = '<s:property value="assessName" escape="false"/>';
		data[<s:property value="#st.index"/>] = "";
	</s:iterator>
	
    var chart2;
    $(document).ready(function() {
        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container23',
                type: 'line'
            },
			lang: {  
                 printChart: "打印",
                 downloadJPEG: "", 
                 downloadPDF: "" , 
                 downloadPNG: "导出图片" , 
                 downloadSVG: "", 
      		},
      		exporting:{  
                filename:'平均分',  
                sourceWidth: 900,
    			 sourceHeight: 600,
               url:'<%=basePath%>SaveAsImage'
            }, 
            title: {
                text: name
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: xAxis,
                labels: {
               	   	rotation: -65,
               	   	align: 'right',
               		style: { 
               			fontSize: '13px'
               		}
               	 },
               	y:23
            },
            yAxis: {
                title: {
                    text: ''
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return s = this.series.name +':<b>'+ this.y +'</b>';
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                    }
                }
            },
            legend: {
            	enabled: false,
            },
            series: seriesValue
        });
    });
    
});
                          
</script>
<script type="text/javascript">
/*饼状图*/


</script>


<body id="mouseRight">
	<form name="form1" action="initQueAnswerContrastAnalysis.action" method="get">
    <input type="hidden" id="queId" name="queId" value="<s:property value="queId"/>"/>
		<div class="mainDiv">
			<div id="tree-area" style="visibility: hidden; position: absolute; top: 0px; width:0px;">
			<div class="ydlg-hd">信息选择[双击选中]</div>
			<div class="ydlg-bd">
				<ul id="tree_area" class="ztree" ></ul>
			</div>
		</div>	
		<dl class="mtab">
			<dt>
				<p class="position">
					当前位置：<a>统计分析</a><a>数据对比</a><a><s:property value="questionnaireInfo.queName"/></a><a>数据对比</a>
				</p>
				<a href="queAnswerContrastAnalysisList.action" class="back">返回</a>
			</dt>
			<dd>
				<ul class="inputinfo">
					<li>
							<span>信息选择：</span>
							<div style="float: left;">
								<input type="text" id="queIdenDictName" name="questionnaireIdentityInfo.queIdenDictInfo.queIdenDictName" value="<s:property value="questionnaireIdentityInfo.queIdenDictInfo.queIdenDictName"/>" class="ipt_s" readonly="readonly" /> 
								<input id="m-areaTree" type="button" class="btn_select" value="选择..." style="cursor: pointer;"/> 
								<input type="hidden" id="indenId" name="questionnaireIdentityInfo.indenId" value="<s:property value="questionnaireIdentityInfo.indenId"/>" class="ipt_s" />
							</div>
							<span>选择比较对象：</span>
							<div style="float: left;">
								<input type="text" id="checkNameValue" name="checkNameValue" value="<s:property value='checkNameValue'/>" class="ipt_s" readonly="readonly" /> 
								<input type="button" οnclick="initPapersPersonInfoList();" class="btn_select" value="选择..." style="cursor: pointer;"/> 
								<input type="hidden" id="checkIdValue" name="checkIdValue" value="<s:property value='checkIdValue' />" class="ipt_s" />
							</div>
							<input type="button" value="查询" class="btn" οnclick="check();" />
					</li>
				</ul>
				</form>
				<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="listTab">
					<caption>
						<p class="title">答卷数量比较</p>
						<p class="btnbars"><a href="javascript:showOrDisplay('container3');">折线图</a></p>
						<p class="btnbars"><a href="javascript:showOrDisplay('container2');">柱状图</a></p>
						<p class="btnbars"><a href="javascript:showOrDisplay('container1');">饼状图</a></p>
						<p class="btnbars"><a href="javascript:showOrDisplay('listTab1');">表格</a></p>
					</caption>
					<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="listTab" id="listTab1">
						<tr>
							<td class="datatitle" style="width: 5%">序号</td>
							<td class="datatitle" style="width: 10%"><s:property value="questionnaireIdentityInfo == null ? '信息名称' :questionnaireIdentityInfo.queIdenDictInfo.queIdenDictName"/></td>
							<td class="datatitle" style="width: 10%">答卷数量</td>
							<td class="datatitle" style="width: 13%">总分</td>
							<td class="datatitle" style="width: 13%">平均分</td>
						</tr>
						<s:iterator value="hashtableQueNumList" status="st" id="queInfo">
							<tr>
								<td class='box'><s:property value="#st.count"/></td>
								<td><s:property value="CHECKNAME_VALUE"/></td>
								<td><s:property value="NUM"/></td>
								<td><s:property value="SCORE"/></td>
								<td><s:property value="AVGSCORE"/></td>
							</tr>
						</s:iterator>
					</table>
					<div id="container1" style="min-width: 600px; text-align:center; width:90%; height: 400px; margin: 0 auto; display:none"></div>
					<div id="container2" style="min-width: 600px; text-align:center; width:90%; height: 400px; margin: 0 auto; display:none"></div>
					<div id="container3" style="min-width: 600px; text-align:center; width:90%; height: 400px; margin: 0 auto; display:none"></div>
				</table>
				
				<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="listTab">
					<caption>
						<p class="title">评估指标比较</p>
						<p class="btnbars"><a href="javascript:showOrDisplay2('container23');">折线图</a></p>
						<p class="btnbars"><a href="javascript:showOrDisplay2('container22');">柱状图</a></p>
						<!-- <p class="btnbars"><a href="javascript:showOrDisplay2('container21');">饼状图</a></p> -->
						<p class="btnbars"><a href="javascript:showOrDisplay2('listTab21');">表格</a></p>
					</caption>
				<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="listTab" id="listTab21">
					<tr>
						<td class="datatitle" style="width: 5%" rowspan="2">序号</td>
						<td class="datatitle"  rowspan="2"><s:property value="questionnaireIdentityInfo == null ? '信息名称' :questionnaireIdentityInfo.queIdenDictInfo.queIdenDictName"/></td>
						<td class="datatitle"  rowspan="2">答卷数量</td>
						<td class="datatitle" colspan="<s:property value="queryAssessInfoList.size"/>">平均得分</td>
					</tr>
					<tr>
						<s:iterator value="queryAssessInfoList">
							<td class="datatitle"><s:property value="assessName"/></td>
						</s:iterator>
					</tr>
					<s:iterator value="hashtableQueAssessList" status="st" var="queInfo">
						<tr>
							<td class='box'><s:property value="#st.count"/></td>
							<td><s:property value="CHECKNAME_VALUE"/></td>
							<td><s:property value="NUM"/></td>
							<s:iterator value="queryAssessInfoList" status="st1">
								<td><s:property value="hashtableQueAssessList[#st.index][\"assessInfo_\" + #st1.index]"/></td>
							</s:iterator>
						</tr>
					</s:iterator>
				</table>
				<div id="container21" style="min-width: 600px; text-align:center; width:90%; height: 400px; margin: 0 auto; display:none"></div>
				<div id="container22" style="min-width: 600px; text-align:center; width:90%; height: 400px; margin: 0 auto; display:none"></div>
				<div id="container23" style="min-width: 600px; text-align:center; width:90%; height: 400px; margin: 0 auto; display:none"></div>
				
			</dd>
		</dl>
	</div>
</body>
</html>
<script type="text/javascript">
		var btnIds = ['m-areaTree']; //按钮名称
		var tanchuDivs = ['tree-area']; //展示div名称
		for ( var i = 0; i < btnIds.length; i++) {
			var td = new HelloWorld(btnIds[i], tanchuDivs[i]);
			YAHOO.ext.EventManager.onDocumentReady(td.init, td, true);
		}
</script>


===================================================================================================================================

华清545
关注
专栏目录
HighCharts画图/请求路径/git使用总结
Preserve
05-31 1059
1、利用highcharts画柱状图  （1）为了让每个柱上面显示相应的值，在highcharts的option设置如下参数： plotOptions: { series: { pointWidth: 30, pointPadding: 0.2, borderWidth
对highcharts的总结（饼图、柱状图、折线图、曲线图）
java_zhaoyanli的专栏
10-25 4032
1，饼图 Highcharts Example g.highcharts-grid:nth-child(6) > path { stroke-width: 0; } .highcharts-background{ fill:transparent !importan
Highcharts使用教程
grous的专栏
05-18 6029
<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> My JSP 'MyJsp.j
Highcharts 调整曲线图的粗细、点大小、点形状
Ellie
05-07 1万+
例子1： 粗细：lineWidth 默认值为2 plotOptions: { series: { marker: { radius: 3, //曲线点半径，默认是4 symbol: ‘...
【highcharts】highcharts(highmaps)实现疫情地图（一看就会篇）
热门推荐
GengMS的博客
03-27 3万+
【highcharts】highcharts(highmaps)实现疫情地图 有人可能问为什么不用echarts，echarts简单容易上手啊，因为echarts他官网没有地图数据的下载地址需要自己上网搜比较麻烦，并且highcharts官网有全世界的地图，大到世界地图小到世界各地市区地图，都是比较全的，后期加个下钻功能也是比较方便容易的。 一，highcharts使用介绍 Highchart...
highcharts使用
08-08
【标题】：“Highcharts使用” 在网页数据可视化领域，Highcharts是一个非常受欢迎的JavaScript库，它使得创建交互式图表变得简单高效。Highcharts以其丰富的图表类型、高度自定义的选项和出色的性能，广泛应用于...
Highcharts使用说明中文WORD版
07-22
资源名称：Highcharts使用说明 中文WORD版内容简介：Highcharts是一个跨浏览器的Javaｓｃｒｉｐｔ图表控件，支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能，只需要...
Highcharts使用手册
08-16
完整的Highcharts使用手册,有丰富的实例，可以直接复制使用
Highcharts使用简例及异步动态读取数据
09-03
这通常包括jQuery库（因为Highcharts经常与jQuery一起使用）和Highcharts本身的库文件。你可以从Highcharts的官方网站（http://www.highcharts.com/）下载这些文件，同时该网站还提供了丰富的教程和使用文档。 创建...
Highcharts-多条折线图（静态、动态）
luckycz的博客
07-17 1万+
var chart = new Highcharts.Chart({}) 多线条折线图
【HightCharts】Vue2.0 引入 HightCharts
joanmelon的博客
10-28 1045
最近在项目中需要制作一个3d的环形图，找了d3和echarts都没有做3d的，最后发现highcharts有3d图标的饼图。第三步：index.vue中使用。第二步： main.js中引入。
关于数据可视化Chartjs，Highcharts用法
好好学习
11-25 5951
做数据显示时总需要各种图表，显示的更形象，什么饼状图，柱状图的。常用的就是Chart.js。或者Highchartsjs写的 chartjs可以方便的绘制出各种图形，同时对数据进行切换。chartjs是canvas写的，所以 var ctx = document.getElementById("canvas"); Highchartsjs则是svg绘制。 以线形图为例 ...
Highcharts入门 前端图表显示
夜
04-30 604
最近又跑去做前端的东西，需要画一个趋势图，听同学推荐使用了highcharts。本文主要针对highcharts入门。 1.  引入highcharts 在html中引入highcharts 如果没有引入了jQuery需要引入 2. 基本格式 我就使用了最简单的一种，在它的官网上可以找到源码 官网demo HTML中使用一个div装表格
highcharts 显示点击的图例数据（隐藏其他）
llll20000的专栏
01-03 3379
function emitLegendItemClick(me) { var container = me.chart.container; var legenedItemIndex = me.index; if(container.curr_index == "undefined") { for (var i = 0; i < me.chart.series
关于Highcharts中隐藏部分数据功能
leizi191110211的专栏
10-15 2174
series: [{             data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],             visible: false//默认不显示         }, {             data: [144.0, 176.0, 135.6
Highcharts使用小心得
u010026207的博客
04-21 1350
目前使用Highcharts是开发手机端的一些图表页面，相对于交互的要求，这边在开发的过程中遇到了一些问题。目前总结一些问题和解决方法。1、Highcharts封装由于Highcharts开发会多处用到，所以我这边进行了封装，目前我还是用的angularJs1.0系列，这边直接贴代码。&lt;div id="container1" style="min-width: 310px; height: ...
highcharts 图表中的“highcharts.com.cn”标签隐藏
JinLong的博客
12-14 2229
然后在你写的css文件中加上下面一段： text.highcharts-credits{ display: none; } 效果如下图所示
HighCharts常用设置
01-15 6446
看到社区里有很多关于highcharts的问题，我做的时候也常来找答案，下面把前两周的问题整理出来： 1. X轴文字斜着放，在xAxis里设置 1 xAxis: { 2                 labels: { 3                 
Highcharts图表库：特性与使用示例
"Highcharts 使用文档，包括各种图表类型的介绍、配置语法、调用示例以及特点和优势。" Highcharts 是一个广泛使用的JavaScript图表库，它允许开发者轻松创建各种高质量的图表，如柱状图、折线图、饼图、天气图等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值