도표 생 성 및 드 롭 다운 상자 미화 플러그 인 사용 총화
35527 단어 Highchartschosen
highcharts 도표 생 성 JS.참조 URL:http://www.highcharts.com/
selected 드 롭 다운 상자 미화 JS.참조 url:http://davidwalsh.name/demo/jquery-chosen.php
사용 할 때 방법 을 추출 하여 간단 한 비 고 를 넣 었 다.루트 의 URL 을 참고 하 십시오.
<html>
<head>
<title>highcharts </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
/**
* highcharts
*
* @param {object} chart
* @param {object} credits
* @param {object} lang
* @param {object} exporting
* @param {object} title
* @param {object} xAxis X
* @param {object} yAxis Y
* @param {object} plotOptions
* @param {object} labels
* @param {array} series
*/
chart = new Highcharts.Chart({
/**
*
*
* @param {string} renderTo
* @param {int} width
* @param {int} hight
* @param {string} type
* @param {string} zoomType ， ：x, y, xy
* @param {string} backgroundColor ， ：x, y, xy
* @param {string} plotBackgroundColor ， ：x, y, xy
*/
chart: {
//
renderTo: 'container',
//
width: 600,
//
hight: 500,
//
type: 'line',
// ：x，y，xy
zoomType: ''
},
/**
* ，
*
* @param {boolean} enabled
* @param {string} href
* @param {string} text
*/
credits:{
enabled: false,
href: "http://www.msnui.tk/Admin",
text: ' '
},
/**
* ，
*
* @param {string} exportButtonTitle
* @param {string} printButtonTitle
*/
lang:{
exportButtonTitle:' PDF',
printButtonTitle:' '
},
/**
* ，
*
* @param {boolean} enabled
* @param {object} buttons
* @param {string} filename
* @param {string} type
*/
exporting:{
//
enabled:true,
//
buttons:{
//
exportButton:{
menuItems: null,
onclick: function() {
this.exportChart();
}
},
//
printButton:{
enabled:false
}
},
//
filename: ' ',
//
type:'application/pdf'
},
/**
*
*
* @param {string} text ， ，
*/
title: {
text: ' '
},
/**
* X
*
* @param {array} categories X
* @param {object} labels
* @param {int} tickInterval
* @param {object} title
*/
xAxis: {
// X
categories: [' ', ' ', ' ', ' ', ' '],
//
labels:{
//
align: 'center',
//
formatter: function(){
return this.value;
},
//
rotation: 20,
//
staggerLines: 1
},
// X ，
tickInterval: 1,
//
title: {
text: ' '
}
},
/**
* y
*
* @param {object} labels
* @param {int} tickInterval
* @param {object} title
*/
yAxis: {
//
labels:{
//
align: 'right',
//
formatter: function(){
return this.value + ' ';
}
},
// y ，
tickInterval: 3,
//
title: {
text: ' '
}
},
/**
* 、
* @param {object} series ，
* @param {object} bar
* @param {object} column
* @param {object} line
* @param {object} spline
* @param {object} pie
*/
plotOptions:{
/**
* ， ， 。
*/
series: {
//
cursor: 'pointer',
events:{
//
legendItemClick: false
},
// ，
pointWidth: 15
},
/**
*
*/
bar:{
//
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 0 ，
minPointLength: 2,
// 。 ， 。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 。
showInLegend: true,
// ， ：null， ：normal， ：percent
//stacking: 'normal',
//
zIndex: 1
},
/**
*
*/
column:{
//
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 0 ，
minPointLength: 2,
// 。 ， 。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 。
showInLegend: true,
// ， ：null， ：normal， ：percent
//stacking: null,
//
zIndex: 2
},
/**
* ， spline 。
*/
line:{
//
allowPointSelect: true,
//
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 。 ， 。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 。
showInLegend: true,
//
zIndex: 3
},
/**
* ， spline 。
*/
spline:{
//
allowPointSelect: true,
//
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 。 ， 。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 。
showInLegend: true,
//
zIndex: 3
},
/**
*
*/
pie:{
//
allowPointSelect: true,
// ，
slicedOffset: 5,
//
center: [100, 80],
//
size: 100,
//
dataLabels: {
//
enabled: true,
//
distance: 10
},
//
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
//
ignoreHiddenPoint: true,
// 。 ， 。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 。
showInLegend: false,
//
zIndex: 0
}
},
/**
*
*
* @param {array} items
*/
labels: {
items: [{
html: ' ',
style: {
left: '65px',
top: '8px',
color: 'black'
}
}]
},
/**
* ，
*
* @param {string} type
* @param {string} name
* @param {array} data ，
*/
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: ' ',
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'pie',
name: ' ',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23,
color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}]
}]
});
});
});
</script>
</head>
<body>
<script src="./js/highcharts/highcharts.js"></script>
<script src="./js/highcharts/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html>
---------------------------------------------------------------------------------
2. highstock ， ， exporting 。
<html>
<head>
<title>highstock </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- -->
<script type="text/javascript" src="./js/usdeur.js"></script>
<script type="text/javascript">
//
$(function() {
/**
* highstock
*
* @param {object} chart
* @param {object} credits
* @param {object} lang
* @param {object} exporting
* @param {object} title
* @param {object} xAxis X
* @param {array} series
*/
var chart1 = new Highcharts.StockChart({
/**
*
*
* @param {string} renderTo
* @param {int} width
* @param {int} hight
*/
chart: {
renderTo: 'container',
//
width: 700,
//
hight: 500
},
/**
* ，
*
* @param {boolean} enabled
* @param {string} href
* @param {string} text
*/
credits:{
enabled: false,
href: "http://www.msnui.tk/Admin",
text: ' '
},
/**
* ，
*
* @param {array} months
* @param {array} shortMonths
* @param {array} weekdays
* @param {string} exportButtonTitle
* @param {string} printButtonTitle
*/
lang:{
months: [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
shortMonths: [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
weekdays: [' ', ' ', ' ', ' ', ' ', ' ', ' '],
exportButtonTitle:' PDF',
printButtonTitle:' '
},
/**
* ，
*
* @param {boolean} enabled
* @param {object} buttons
* @param {string} filename
* @param {string} type
*/
exporting:{
//
enabled:true,
//
buttons:{
//
exportButton:{
menuItems: null,
onclick: function() {
this.exportChart();
}
},
//
printButton:{
enabled:false
}
},
//
filename: ' ',
//
url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',
//
type:'application/pdf'
},
/**
*
*
* @param {string} text ， ，
*/
title: {
text: ' '
},
/**
*
*
* @param {array} buttons
* @param {int} selected
* @param {boolean} inputEnabled input
*/
rangeSelector: {
// ， 。
// type ： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 'all'。
// count type。
// text
buttons: [{
type: 'month',
count: 1,
text: '1 '
}, {
type: 'month',
count: 3,
text: '3 '
}, {
type: 'month',
count: 6,
text: '6 '
}, {
type: 'year',
count: 1,
text: '1 '
},{
type: 'year',
count: 3,
text: '3 '
}, {
type: 'all',
text: ' '
}],
// ：0（ ）、1（ ）……
selected: 1,
// input
inputEnabled: false
},
/**
*
*
* @param {string} xDateFormat
*/
tooltip:{
//
xDateFormat: '%Y-%m-%d %A'
},
/**
* X
*
* @param {object} dateTimeLabelFormats x ，
*/
xAxis:{
// X ，
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
/**
* ，
*
* @param {string} name
* @param {array} data ， 。data ：[[ , ], [ , ], [ , ], ……]
*/
series: [{
name: ' ',
data: usdeur
}]
});
});
</script>
</head>
<body>
<script src="./js/highstock/highstock.js"></script>
<script src="./js/highstock/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
하 이 차 트 예 쁜 도표highcharts 는 순수 js 도표 도구 로 브 라 우 저 호 환 도 좋 고 대부분의 도표 유형 을 지원 합 니 다. 예 를 들 어 직선 도, 곡선 도, 지역 도, 지역 곡선 도, 기둥 모양 도, 떡 포장 도, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
