Highcharts가 예쁜 그래프를 만들었어요.
2397 단어 Highcharts
var stockchart;
var curreychart;
$(document).ready(
function() {
$.getJSON("gotDailyReportStockView.statFund", function(data) {
var stockoptions=createSeries(' ',' (%)',' ','stockcontainer',data.stock);
var curreyoptions=createSeries(' ',' (%)',' ','currencycontainer',data.currency);
stockchart = new Highcharts.Chart(stockoptions);
curreychart=new Highcharts.Chart(curreyoptions);
});
});
function createSeries(title,text,toolTitle,rendercontainer,data){
var options = {
chart : {
renderTo : rendercontainer,
defaultSeriesType : 'spline'
},
title : {
text : title,
x : -20
// center
},
xAxis : {
type : 'datetime',
tickInterval : 7 * 24 * 3600 * 1000, // one week
categories : [],
gridLineWidth : 1
},
yAxis : {
title : {
text : text
}
},
legend : {
enabled : true
},
exporting : {
enabled : false
},
tooltip : {
formatter : function() {
return '<b>' + this.series.name + '</b><br/>'
+ data["label"][this.x] + ' '+toolTitle+':' + this.y;
}
},
plotOptions : {
spline : {
cursor : 'pointer',
point : {
events : {
click : function() {
hs.htmlExpand(null, {
pageOrigin : {
x : this.pageX,
y : this.pageY
},
headingText : this.series.name,
maincontentText : 'this.category: '
+ this.category
+ '<br/>this.y: ' + this.y,
width : 200
});
}
}
}
}
},
series : []
}
$.each(data, function(key, val) {
if (key != 'label') {
options.series.push( {
name : key,
data : val
});
}
});
return options
}
categories: X 좌표 설정
series: Y 좌표 설정.
첨부는 API
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
하 이 차 트 예 쁜 도표highcharts 는 순수 js 도표 도구 로 브 라 우 저 호 환 도 좋 고 대부분의 도표 유형 을 지원 합 니 다. 예 를 들 어 직선 도, 곡선 도, 지역 도, 지역 곡선 도, 기둥 모양 도, 떡 포장 도, ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.