티스토리 뷰

참조:

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-formatting.htm


decimalSeparator - 소수 구분 기호로 사용되는 문자입니다. 지정하지 않으면 기본 구분 기호는 '.'입니다. 
thousandsSeparator - 천 단위 구분 기호로 사용되는 문자입니다. 디폴트는 ','
decimalPlaces - 소수점 이하의 자리수. 부동 소수점 숫자의 경우 기본값은 2입니다. 
negativeWithBrackets - 부울을 괄호로 표시할지 여부를 지정하는 부울입니다. 기본값은 false입니다. 
perfix - 접두어로서 추가되는 문자열. 기본값은 비어 있습니다. 
sufix - sufix 로 추가 될 문자열. 기본값은 비어 있습니다. 
dateFormat - 날짜 형식 문자열 (선택 사항). 이 속성은 Date 객체를 표시 할 때만 적용 할 수 있습니다. 



예제

<script type="text/javascript">
$(document).ready(function () {
// prepare chart data
var sampleData = [
{ Day:0, Keith:30, Erica:15, George: 25},
{ Day:1, Keith:25, Erica:25, George: 30},
{ Day:2, Keith:30, Erica:20, George: 25},
{ Day:3, Keith:35, Erica:25, George: 45},
{ Day:4, Keith:20, Erica:20, George: 25},
{ Day:5, Keith:30, Erica:20, George: 30},
{ Day:6, Keith:60, Erica:45, George: 90}
];
// prepare jqxChart settings
var settings = {
title: "Fitness & exercise weekly scorecard",
description: "Time spent in vigorous exercise",
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
dataField: 'Day',
formatFunction: function (value, itemIndex, serie, group) {
// value is from 0-6 (see 'Day' field in sampleData above)
var days =
['Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday', 'Sunday'];

return days[value];
},
valuesOnTicks: false
},
valueAxis:
{
minValue: 0,
maxValue: 100,
unitInterval: 10,
title: {text: 'Time in minutes'},
labels:
{
horizontalAlignment: 'right',
formatSettings:
{
decimalPlaces: 2
}
}
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'line',
toolTipFormatFunction: function(value, itemIndex, serie, group, xAxisValue, xAxis) {
var days =
['Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday', 'Sunday'];

var formattedTooltip = "<div>" +
"<b>Day: </b>" + days[xAxisValue] + "</br>" +
"<b>Serie: </b>" + serie.dataField + "</br>" +
"<b>Time: </b>" + value + " min</br>" +
"</div>";
return formattedTooltip;
},
series: [
{ dataField: 'Keith', displayText: 'Keith'},
{ dataField: 'Erica', displayText: 'Erica'},
{ dataField: 'George', displayText: 'George'}
]
}
]
};

// select the chartContainer DIV element and render the chart.
$('#chartContainer').jqxChart(settings);
});
</script>


사용 예

seriesGroups:
[
{
type: 'column',
valueAxis: {
visible: true,
position : 'left',
title: { text: '발전수익(원)<br><br>' },
labels: {
horizontalAlignment: 'right',
formatSettings : { thousandsSeparator : ',' }},
},
series:
[
{ dataField: 'smp_value', displayText:'SMP 수익(원)' },
{ dataField: 'rec_value', displayText:'REC 수익(원)' }
]
},
{
type: 'line',
valueAxis:
{
visible: true,
position: 'right',
title: { text: '총 수익(원)' },
gridLines: { visible: false },
labels: {
horizontalAlignment: 'left',
formatSettings : { thousandsSeparator : ',' }},
thousandsSeparator : ','
},
series: [
{ dataField: 't_value', displayText: '총 수익(원)' }
]
}
]












댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함