nhn / tui.chart Goto Github PK
View Code? Open in Web Editor NEW๐๐ Beautiful chart for data visualization.
Home Page: http://ui.toast.com/tui-chart/
License: MIT License
๐๐ Beautiful chart for data visualization.
Home Page: http://ui.toast.com/tui-chart/
License: MIT License
v2.15.0
Chrome, OSX
Series is rendered in order to series index.
priority of ํฌ๋ฆฌ์ค๋ง์ค
, the 0 index is higher than ๋ฌ๋ ฅ
, the 1 index.
As two series has same data 0, we could only show tooltip of ํฌ๋ฆฌ์ค๋ง์ค
.
However, when ๋ฌ๋ ฅ
is selected inside legend area. It should show tooltip of ๋ฌ๋ ฅ
.
Because selection means ๋ฌ๋ ฅ series will only be activated.
var container = document.getElementById('chart-area');
var data = {
categories: ['2018.01.25'],
series: [
{
name: 'ํฌ๋ฆฌ์ค๋ง์ค',
data: [0]
},
{
name: '๋ฌ๋ ฅ',
data: [0]
}
]
};
var options = {
chart: {
width: 400,
height: 300,
title: '๋ ์ง๋ณ ๊ฒ์๋'
},
series: {
showDot: true
}
};
var chart = tui.chart.lineChart(container, data, options);
When ๋ฌ๋ ฅ
is selected inside legend area. It should show tooltip of ๋ฌ๋ ฅ
.
OS: Windows 10 x64
Browser: Firefox & chrome (latest version)
Legend label color is always black, even when i set another color on the theme.
var DEFAULT_COLOR = '#ffffff';
var DEFAULT_BACKGROUND = '#000000';
var DEFAULT_FONTWEIGHT = 'normal';
var DEFAULT_FONT = 'Roboto';
var EMPTY = '';
var DEFAULT_AXIS = {
tickColor: DEFAULT_COLOR,
title: {
fontSize: 12,
fontFamily: EMPTY,
color: DEFAULT_COLOR,
fontWeight: DEFAULT_FONTWEIGHT
},
label: {
fontSize: 12,
fontFamily: EMPTY,
color: DEFAULT_COLOR,
fontWeight: DEFAULT_FONTWEIGHT
}
};
var charttheme = {
chart: {
background: {
color: DEFAULT_BACKGROUND,
opacity: 0
},
fontFamily: DEFAULT_FONT
},
title: {
fontSize: 18,
fontFamily: EMPTY,
color: DEFAULT_COLOR,
fontWeight: DEFAULT_FONTWEIGHT
},
yAxis: DEFAULT_AXIS,
xAxis: DEFAULT_AXIS,
plot: {
lineColor: '#dddddd',
background: '#ffffff',
label: {
fontSize: 11,
fontFamily: DEFAULT_FONT,
color: '#888'
}
},
series: {
label: {
fontSize: 11,
fontFamily: DEFAULT_FONT,
color: DEFAULT_COLOR,
fontWeight: DEFAULT_FONTWEIGHT
},
colors: [ '#62923E', '#C90509', '#ac4142', '#d28445', '#f4bf75', '#90a959', '#75b5aa', '#6a9fb5', '#aa759f', '#8f5536'],
borderColor: EMPTY,
borderWidth: EMPTY,
selectionColor: EMPTY,
startColor: '#F4F4F4',
endColor: '#345391',
overColor: '#F0C952',
dot: {
fillColor: EMPTY,
fillOpacity: 1,
strokeColor: EMPTY,
strokeOpacity: 1,
strokeWidth: 2,
radius: 2,
hover: {
fillColor: EMPTY,
fillOpacity: 1,
strokeColor: EMPTY,
strokeOpacity: 0.8,
strokeWidth: 3,
radius: 4
}
},
ranges: []
},
legend: {
label: {
fontSize: 12,
fontFamily: DEFAULT_FONT,
color: "white",
fontWeight: DEFAULT_FONTWEIGHT
}
},
tooltip: {},
chartExportMenu: {
backgroundColor: '#fff',
borderRadius: 0,
borderWidth: 1,
color: '#000'
}
};
tui.chart.registerTheme('charttheme', charttheme);
//Creation du graphique
var container = $("#divrepartitiontype").find('.result-graph')[0];
var data = {
categories: ["Types d'appels"],
series: [
{
name: "Entrants",
data: repartitionpartype.repartition[1].count
},
{
name: "Sortants",
data: repartitionpartype.repartition[2].count
}
]
}
var options = {
chart: {
width: $(container).width(),
height: 200
},
legend: {
showCheckbox: false
},
series: {
radiusRange: ['70%', '100%']
}
};
options.theme = 'charttheme';
tui.chart.pieChart(container, data, options);
Color of the legend should change when you set a different label color.
rawData = {
series: [
{
name: 'test',
data: [
// {x: 400, y:200, r:1, label:'T*T'},
// {x: 600, y:400, r:1, label:'T*T'},
{x: 600, y:300, r:1, label:'T*T'}
]
}
]
};
์ด๋ฐ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ํ๋๋ง ์
๋ ฅํ ๊ฒฝ์ฐ
์ ๋๋ก ๋ ๋๋ง์ด ๋์ง ์์ต๋๋ค.
์ฐจํธ์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ค ํดํ์ ๋ณด๋ฉด x,y ๊ฐ๊ฐ์ ๊ฐ์ด null๋ก ํ์ ๋ฉ๋๋ค.
๋ฒ์๋ฅผ ์ก์ง ๋ชปํ ํ์ธ์ง xAxis, yAxis๋ ํ๊ธฐ๋์ง ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ
rawData = {
series: [
{
name: 'test',
data: [
// {x: 400, y:200, r:1, label:'T*T'},
{x: 600, y:400, r:1, label:'T*T'},
{x: 600, y:300, r:1, label:'T*T'}
]
}
]
};
๋ฐ์ดํฐ๊ฐ 2๊ฐ ์ด์์ด๋ผ๋ xํน์ y๊ฐ์ด ๊ฐ์ ๋,
์์ฒ๋ผ x๊ฐ์ด ๋์ผํ๊ฒฝ์ฐ x๊ฐ๋ง null๋ก ํ๊ธฐ ๋ฉ๋๋ค.(xAxis๋ง ํ๊ธฐ ์๋จ)
์ด๋ฅผ ํด๊ฒฐํ ๋ฐฉ๋ฒ์ด ์์๊น์?
๋ง๋ถ์ฌ ์ด์ฒ๋ผ ์ข์ ํ๋ก์ ํธ๋ฅผ ์คํ์์ค๋ก ์ ๊ณตํด์ฃผ์
์ ์ ๋ง ๊ฐ์ฌํฉ๋๋ค.
// Write example code
I'm using the latest 2.9.4.
When I set the axis option like the following, offset does not apply.
xAxis: {
title: {
text: 'X Axis Title',
offsetX: 50,
offsetY: 10
}
},
By seeing the function '_renderTitleArea', I think it's not implemeted.
Is it right?
Please review it :)
์๋
ํ์ธ์
ํดํ ํ์ ๊ด๋ จํ์ฌ ๋ฌธ์๋๋ฆฝ๋๋ค.
ํดํ ์ต์
์ ํ
ํ๋ฆฟ ์ ์ฉ์ ์ถ๊ฐ์ ์ธ ํ
์คํธ๋ฅผ ๋ฃ์ผ๋ฉด ํ๊ธ๋ง ์ค๋ฐ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํฉ๋๋ค.
๋ค์ ๋ ์ด๋ฏธ์ง์ ๊ฐ์ด value๊ฐ ๋ค์์ ์ซ์, ํน์๋ฌธ์(%,! ๋ฑ...), ์๋ฌธ์๋
value๊ฐ๊ณผ ํจ๊ป ํ ์ค๋ก ์ฒ๋ฆฌ๊ฐ ๋์ง๋ง ํ๊ธ๋ง ์ค์ด ๋ฐ๋์ด์ ์ฒ๋ฆฌ๊ฐ ๋ฉ๋๋ค.
ํ ํ๋ฆฟ์ ๋ค์๊ณผ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
tooltip : {
offsetY: -40,
offsetX: -5,
template: function(category, item) {
var html = '<time class="date">'+category+'</time>'
+ '<strong class="count">'+item.value+'ํ'+'</strong>'
return html;
}
},
๊ฐ๊ณผ ๋จ์๋ฅผ ๋ถ์ฌ์ ํ๊ธฐ๋ฅผ ํ๊ณ ์ถ์๋ฐ, ๋ฐฉ๋ฒ์ด ์๋์ง์?
3.0.1
mac, chrome
resize() api is not working at line chart
var chart = tui.chart.lineChart(container, data, options);
chart.resize({
width: 500,
height: 500
});
Hi,
It seems Toast UI chart currently has no option to read data from files such as csv, xml, or json.
As far as I know there's a couple of open source javascript chart libraries which support file loading features through simple forms of methods and parameters.
Here's one of what I've found below:
http://c3js.org/samples/data_url.html
I think this is pretty good idea, especially for those who are not programmers, and even for programmers this works pretty fine as it's simple, easy to understand the code, and reduces some meaningful amount of time.
How do you think about supporting this feature?
์๋
ํ์ธ์.
ํด๋ผ์ฐ๋ํ๋ซํผ๊ฐ๋ฐํ ์ ์งํธ ์
๋๋ค.
high chart ๋ผ์ด์ ์ค ๋ง๋ฃ๋ก tui.chart๋ฅผ ์ ์ฉํ๋ ค ํฉ๋๋ค.
Wiki ๋ด์ฉ๋๋ก bower๋ฅผ ์ฌ์ฉํด์ tui.chart๋ฅผ ์ค์น์ ์ค๋ฅ ๋ฉ์์ง๊ฐ ์ถ๋ ฅ๋ฉ๋๋ค.
๊ฐ์ด๋ ๋ถํ๋๋ฆฝ๋๋ค.
$ bower install tui-chart
bower tui-chart#* not-cached https://github.com/nhnent/tui.chart.git#*
bower tui-chart#* resolve https://github.com/nhnent/tui.chart.git#*
bower tui-chart#* download https://github.com/nhnent/tui.chart/archive/2.5.0.tar.gz
bower tui-chart#* extract archive.tar.gz
bower tui-chart#* resolved https://github.com/nhnent/tui.chart.git#2.5.0
bower raphael#v2.1.4b not-cached https://github.com/nhnent/raphael.git#v2.1.4b
bower raphael#v2.1.4b resolve https://github.com/nhnent/raphael.git#v2.1.4b
bower tui-code-snippet#1.0.8 not-cached https://github.com/nhnent/tui.code-snippet.git#1.0.8
bower tui-code-snippet#1.0.8 resolve https://github.com/nhnent/tui.code-snippet.git#1.0.8
bower tui-component-effects#~1.1.0 not-cached https://github.com/nhnent/tui.component.effects.git#~1.1.0
bower tui-component-effects#~1.1.0 resolve https://github.com/nhnent/tui.component.effects.git#~1.1.0
bower raphael#v2.1.4b download https://github.com/nhnent/raphael/archive/v2.1.4b.tar.gz
bower tui-code-snippet#1.0.8 download https://github.com/nhnent/tui.code-snippet/archive/1.0.8.tar.gz
bower tui-component-effects#~1.1.0 download https://github.com/nhnent/tui.component.effects/archive/1.1.1.tar.gz
bower tui-component-effects#~1.1.0 extract archive.tar.gz
bower tui-component-effects#~1.1.0 resolved https://github.com/nhnent/tui.component.effects.git#1.1.1
bower tui-code-snippet#~1.1.0 not-cached https://github.com/nhnent/tui.code-snippet.git#~1.1.0
bower tui-code-snippet#~1.1.0 resolve https://github.com/nhnent/tui.code-snippet.git#~1.1.0
bower tui-code-snippet#~1.1.0 download https://github.com/nhnent/tui.code-snippet/archive/1.1.3.tar.gz
bower raphael#v2.1.4b extract archive.tar.gz
bower raphael#v2.1.4b resolved https://github.com/nhnent/raphael.git#v2.1.4b
bower tui-code-snippet#1.0.8 extract archive.tar.gz
bower tui-code-snippet#1.0.8 resolved https://github.com/nhnent/tui.code-snippet.git#1.0.8
bower tui-code-snippet#~1.1.0 extract archive.tar.gz
bower tui-code-snippet#~1.1.0 resolved https://github.com/nhnent/tui.code-snippet.git#1.1.3
bower ECONFLICT Unable to find suitable version for tui-code-snippet
v2.14.2
Chrome, OSX
Value axis shows decimals.
However count cannot be decimals. I don't need decimal ticks
var container = document.getElementById('chart-area');
var data = {
categories: ['12/20/2017', '12/21/2017', '12/22/2017', '12/23/2017', '12/24/2017', '12/25/2017', '12/26/2017'],
series: [{
name: 'issues counts',
data: [1, 0, 0, 1, 0, 1, 0]
}]
};
var options = {
chart: {
height: 350,
width: 550
},
xAxis: {
type: 'datetime',
dateFormat: 'dd์ผ'
},
legend: {
visible: false
}
};
var chart = tui.chart.columnChart(container, data, options);
Value axis shows integer only.
HighChart supports it:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/allowdecimals-false/
์๋
ํ์ธ์
legend์ ์ต์
์ visible : false๋ก ๋ณ๊ฒฝํ์์ ๋,
์ค๋ฅธ์ชฝ ๋์ ์นดํ
๊ณ ๋ฆฌ ํ
์คํธ๊ฐ ์๋ ค์ ๋์ค๊ฒ ๋๋ ์ด์๊ฐ ์์ต๋๋ค.
legend๋ฅผ ์ฌ์ฉํ์ง ์๋ ๊ทธ๋ํ์ ์นดํ
๊ณ ๋ฆฌ์ ๋ํด ์ฝ๊ฐ์ ๊ณต๊ฐ์ด ์์ผ๋ฉด ์ข์ ๊ฒ ๊ฐ์๋ฐ,
ํน์ ๋ค๋ฅธ ํด๊ฒฐ ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์ด ์์์ง์?
legend: {
visible: false,
showCheckbox: false,
},
If data field of series in json format has the same values, it causes the following exception
Exception : Invalid value for <rect> attribute y='NaN'
Please refer to the attached file for details
tui_bug.tar.gz
์๋
ํ์ธ์.
https://github.com/nhnent/tui.chart/wiki/chart-types-column-line-combo
๊ฒฝ๋ก๋ฅผ ์ฐธ์กฐํ์ฌ How to use two yAxis ์ฒ๋ฆฌ๋ฅผ ํ๋ ค ํ๋๋ฐ
example ์ฌ์ดํธ(https://nhnent.github.io/tui.chart/latest/tutorial-sample08-01-column-line-combo-chart.html) ์์ yAxis ์ ์ธ๋ถ๋ฅผ ๊ฐ์ด๋๋๋ก ๋ณ๊ฒฝํ๋๋ฐ ์ฐ์ธก yAxis ๊ฐ ๋ํ๋์ง ์์ต๋๋ค.
[๋ณ๊ฒฝํ ๋ถ๋ถ]
yAxis: [{
title: 'Temperature',
chartType: 'column'
}, {
title: 'Average',
chartType: 'line'
}]
In Create Chart
v2.16.0
Chrome, OSX
Tooltip does not show current focused series information.
var container = document.getElementById('chart-area');
var data = {
categories: ['20170509', '20170510'],
series: [
{
name: 'ํฌ๋ฆฌ์ค๋ง์ค',
data: [0,0]
},
{
name: '๊ฐ์',
data: [0,0]
}
]
};
var options = {
chart: {
width: 700,
height: 400
},
yAxis: {
title: 'Temperature (Celsius)'
},
xAxis: {
title: 'Month',
type: 'datetime',
dateFormat: 'MMM'
},
series: {
showDot: true,
zoomable: true
},
tooltip: {
suffix: 'ยฐC'
},
legend: {
align: 'bottom',
showCheckbox: false
}
};
var chart = tui.chart.lineChart(container, data, options);
Tooltip should show '๊ฐ์'
// Write example code
3.0.1
All
It will be great if this amazing tool has a Timeline support like Google's Timeline.
See example here: https://developers.google.com/chart/interactive/docs/gallery/timeline
It's pretty similar to the Bullet Chart you have. Maybe with a few lines of code, you can support it.
Do you have plans to add it?
์๋
ํ์ธ์?
๊ณต์ ํด์ฃผ์ ์ฐจํธ ์์ค ๊ฐ์ฌํ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
ํน์ ํดํ์ ํ์๋๋ category๊ฐ๊ณผ xAxis์ ํ์๋๋ category์ ๊ฐ์ ๋ค๋ฅด๊ฒ ํ๋ ๊ฒ์ด ๊ฐ๋ฅํ ๊น์?
ํ์ฌ ์ฝ๋์์ ํดํ ์ต์ ์ ๋ค์ ํ ํ๋ฆฟ์ ์ฌ์ฉํ๋ฉด ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์๋๋ฐ์,
ํดํ ํ ํ๋ฆฟ ์ต์
template: function(category, item) {
var html = '<section class="layerContents">'
+ '<time class="date">'+category+'</time>'
+ '<strong class="count">'+item.value+'ํ'+'</strong>'
+ '</section></aside>';
return html;
}
ํ์ฌ ๋ ๊ฐ์ด ๋๊ฐ์ง๋ง ํดํ์๋ง ๋ ๋๊ฐ ํ์๋๋๋ก ๋ณ๊ฒฝํ๊ณ ์ถ์ด ํฌ๋งท์ ๋ณ๊ฒฝํด ๋ณด์์ต๋๋ค
xAxis ์ต์ ๋ณ๊ฒฝ
getDateFormat = function(){
if(period === 'recentWeek')
return 'M.dd';
else(period === 'recentYear')
return 'M์';
};
...
var options = {
xAxis: {
type: 'datetime',
dateFormat: getDateFormat()
}
}
์ ๊ฒฐ๊ณผ์ฒ๋ผ xAxis์ ๋ฐ์ดํฐ ํฌ๋งท์ ๋ณ๊ฒฝํ๋ฉด ํดํ์ category๋ ๋์์ ๋ณ๊ฒฝ๋์ด ๋ฒ๋ฆฝ๋๋ค.
ํฌ๋งท ๋ณ๊ฒฝ ์ธ์๋ beforeShowTooltip ๋ฑ์ผ๋ก ๊ฐ์ ๋ณ๊ฒฝํด๋ณด๋ ค ํ์๋๋ฐ, '12์' ๋ฑ์ผ๋ก ์นดํ ๊ณ ๋ฆฌ ๊ฐ์ด ๋จผ์ ๊ฒฐ์ ๋๋ฉด ์ถ๊ฐ์ ์ธ ๋ ๋ ์ ๋ณด๋ฅผ ํดํ์ ํ์ํ ์๊ฐ ์๋ค์ ใ .ใ
ํดํ ํ ํ๋ฆฟ ๋ณ์ ์ค item ์ค๋ธ์ ํธ์ ํฌ๋งท ๋ณ๊ฒฝ ์ ์นดํ ๊ณ ๋ฆฌ ๊ฐ์ด ๋ค์ด๊ฐ๋ฉด ๊ฐ๋ฅํ ๋ฏ๋ ํ๋ฐ์, ์ ๊ฐ ์ฐพ์ง ๋ชปํ ๋ฐฉ๋ฒ์ด ์์์ง ์ฌ์ญค๋ด ๋๋ค.
์๋ ํ์ธ์.
๋ฒ๊ทธ๊ฐ ์๋ ๊ฒ ๊ฐ์ ๊ธ์ ์๋๋ค.
line ์ฑ ํธ์์ showDot ์ต์
์ ์ฌ์ฉํ๊ณ ์๊ณ categories์ ํด๋นํ๋ ๊ฐ์ null์ ์ฃผ์ด ํ์๋ ํ๊ณ ์์ง ์๋ ๊ฐ์ด ์์ ๋(์ฒ์, ๋ง์ง๋ง์ null๋ก ์ฃผ์์ต๋๋ค.) resize ํจ์๋ฅผ ํธ์ถํ๋ฉด item.endDot์ด undefined๋ผ item.endDot.dot์์
Unhandled rejection TypeError: Cannot read property 'dot' of undefined ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
ie8์์ bar์ฐจํธ๋ฅผ ์ฌ์ฉ ์ค์
๋๋ค. ^^
ํฌ๋กฌ์์๋ export ๋ฉ๋ด๊ฐ ๋ณด์ด๋๋ฐ์(์ ์๋์)
ie8์์๋ export ๋ฉ๋ด๊ฐ ์๋ณด์
๋๋ค
tui-chart.css ์ฝ๋๋ฅผ ๋ณด๋~ .tui-chart-chartExportMenu-area ์ z-index:5000; ์ผ๋ก
๋์ด์๋๊ตฐ์~ ์ด๋ฌธ์ ๋ ์๋๊ฒ ๊ฐ์๋ฐ์~
ie8์ export ๊ธฐ๋ฅ์ ์ง์์ํ๋๊ฒ์ธ๊ฐ์?
ํน์ ์นดํ
๊ณ ๋ฆฌ๋ ๋ฐ์ดํฐ๊ฐ์๊ฒฝ์ฐ ๋ฐฐ์ด ๊ทธ ์์ฒด๋ก ๋ฃ์์ ์๋์?
์๋ฅผ๋ค์ด
var container = document.getElementById('chart');
var data = {
categories: [title],
series: [{
name: '๋จ์',
data: [data1]
},{
name: '์ฌ์',
data: [data2]
}]
};
์์๊ฐ์๊ฒฝ์ฐ title, data1, data2๊ฐ ๋ฐฐ์ด์์ฒด์ธ ์ํ์ธ๋ฐ ์์๊ฐ์ด ํ๋ฉด ํ๋ฉด์ด ๋ค ๊นจ์ง๋๋ฐ ์ด์ฐ ์ฌ์ฉํ๋๊ฒ ์ข์๊น์?
๊ทธ๋ํ๋ฅผ ๋๊ฐ ๊ทธ๋ฆด ๊ฒฝ์ฐ, ๋๋ฒ์งธ ๊ทธ๋ํ์ ํดํ์ด ํ์๋์ง ์์ต๋๋ค.
์ ํํ๋ ์ฒซ๋ฒ์งธ ๊ทธ๋ํ ํดํ์ด ํ์๋๋ ๊ฒ์ผ๋ก ๊ฐ์ต๋๋ค.
๋ผ์ธ์ฐจํธ๋ฅผ ๋๊ฐ ๊ทธ๋ฆฌ๋๋ฐ ์ฒซ๋ฒ์งธ ๊ทธ๋ํ์ ๋ฐ์ดํฐ๊ฐ ํ๋๊ณ , ๋๋ฒ์งธ ๊ทธ๋ํ์ ์ฌ๋ฌ๊ฐ์ธ ๊ฒฝ์ฐ,
๋๋ฒ์งธ ๊ทธ๋ํ์ ์ฒซ ๋ฐ์ดํฐ๋ง ํดํ์ด ์์ชฝ ๊ทธ๋ํ์ ๋ํ๋ฉ๋๋ค.
ํดํ์ ๊ทธ๋ํ๋ค์ด ๊ณต์ ํ๋ ๊ฒ์ผ๋ก ๋ณด์
๋๋ค.
ํ์ธ ๋ถํ๋๋ฆฌ๊ฒ ์ต๋๋ค^^
axis.tickIn, axis.labelInterval,
// Write example code
์๋
ํ์ธ์.
ํด๋ผ์ฐ๋ํ๋ซํผ๊ฐ๋ฐํ ์ ์งํธ ์
๋๋ค.
line chart์์ ๋ช ๊ฐ์ง ๊ถ๊ธํ๊ฒ ์์ด์ ๋ฌธ์ ๋๋ฆฝ๋๋ค.
๊ฐ์ด๋ฐ ์ ๋ ฌ?
๋ง์ฝ ๊ฐ์ด ํ๋ ๋ง ์์ ๊ฒฝ์ฐ, ์ฐจํธ ์ผ์ชฝ ๊ตฌ์์ ์์นํ๊ฒ ๋๋๋ฐ ์ด ๋ ๊ฐ์ด๋ฐ ์์นํ๊ฒ ํ ์ ์๋์?
series ์ ๋ณ๊ฒฝ
Defaul ์์ธ ๋นจ๊ฐ, ์ฃผํฉ ์ธ ๋ค๋ฅธ ์์ผ๋ก ๋ณ๊ฒฝํ๊ณ ์ถ์๋ฐ, ์ด๋ป๊ฒ ์ค์ ํด์ผ๋๋์ง ๊ถ๊ธํฉ๋๋ค.
์ผ์ชฝ, ์ค๋ฅธ์ชฝ padding?
๊ฐ๋ค์ ๋ฃ์ผ๋ฉด ์ ๋์ ๊ฐ๋ค์ ์ ๋ ์ชฝ์ ์์นํ๊ฒ ๋๋๋ฐ, ์ด ๋ ์ฝ๊ฐ ์ฌ์ ๊ณต๊ฐ์ ์ค์ ํ ์ ์๋์?
๋ต๋ณ ๋ถํ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์.
์ฐ์ ์ด๋ ๊ฒ ์ข์ ์คํ์์ค ํ๋์ ํด์ฃผ์๋ ๋ฐ์ ์์ด์ ์กด๊ฒฝ๊ณผ ๊ฐ์ฌ์ ๋ง์์ ๋๋ฆฝ๋๋ค.
https://github.com/nhnent/tui.chart/wiki/getting-started#create-chart
์ ์๋ ์์ ์์ ์กฐ๊ธ ์ด์ํ ๋ถ๋ถ์ ๋ฐ๊ฒฌํ์ต๋๋ค.
์์ ์ ๋ฐ์ดํฐ๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉ์ ํ๊ณ , barChart๋ฅผ ๋ ๋๋ง์ ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ์
Legend1 ์ ๋ํด์ ์ฒซ๋ฒ ์งธ bar๊ฐ ๋ ๋๋ง์ด ๋์ง ์๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
Data ๊ฐ์ ๋ฐ๊ฟ๋ดค๋๋ ๋ ์ ๋๋ก ๋ ๋๋ง์ด ๋๋๋ผ๊ตฌ์..
ํน์ ์์ ์ ๋ฐ์ดํฐ๋ก ํ์ ๋ ๊ฐ์ด ์ ๋์ค๋ ์ด์ ๊ฐ ์์๊น์?
์๋
ํ์ธ์
tui.chart 2.9.0 ์ดํ ๋ฒ์ ์ผ๋ก ์
๋ฐ์ดํธ ํ์๋๋ ๋ค์๊ณผ ๊ฐ์ ์ด์๊ฐ ์์ด ๋ฌธ์๋๋ฆฝ๋๋ค.
์
๋ฐ์ดํธ ํ ๋ฒ์ ์ 2.12.1์ด๊ณ demoํ์ด์ง์์๋ ๋ฐ์ํ๋ ๊ฒ์ ๋ณด๋ ์ต์ ๋ฆด๋ฆฌ์ฆ๋ ๋์ผํ ๊ฒ ๊ฐ์ต๋๋ค.
line chart์ theme ์ค์ ์์ hover๋์์ ๋ dot ์คํ์ผ์ด ๋ณ๊ฒฝ๋๋๋ก ํ์๋๋ฐ์,
๋ง์ฐ์ค๋ฅผ offํ ์ํ์์ ๊ธฐ์กด dot์ผ๋ก ๋์์ค์ง ์์ต๋๋ค.
series: {
colors: ['#111'],
dot: {
fillColor: null,
fillOpacity: 1,
radius: 5,
strokeColor: '#fff',
strokeOpacity: 1,
strokeWidth: 2,
hover: {
fillColor: '#ffe100',
fillOpacity: 1,
radius: 7,
strokeColor: '#111',
strokeOpacity: 1,
strokeWidth: 3
}
}
}
};
dot์ fillColor๋ฅผ null์ด ์๋ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ฐ๊พธ์ด๋ ๋์ผํฉ๋๋ค. hoverํ์ง ์์์ ๋ ๋ค์ ์๋์ dot์ด ๋์์ผ๋ฉด ํ๋๋ฐ ํน์ ํ
๋ง ์ ์ฉ ๋ฐฉ๋ฒ์ด ๋ฐ๋์๋์ง ์ด์์ธ์ง ๋ชจ๋ฅด๊ฒ ์ด์ ๋ฌธ์๋๋ฆฝ๋๋ค. (๊ด๋ จ document๋ ๋ฐ๋์ง ์์ ๋ฏ ํฉ๋๋ค ใ
ใ
)
404 ์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
var options = {
chart: {
width: 900,
height: 500,
title: 'Test'
},
yAxis: {
title: '๋ช
',
min: 0
},
xAxis: {
type: "datetime",
dateFormat: "HH:mm",
tickInterval: "auto"
},
plot: {
lines: [{
value: '1519348800000',
color: 'red'
}],
bands: []
}
};
์๋ ํ์ธ์.
์ฐ์ ์ด๋ ๊ฒ ์ข์ ์คํ์์ค ํ๋์ ํด์ฃผ์๋ ๋ฐ์ ์์ด์ ์กด๊ฒฝ๊ณผ ๊ฐ์ฌ์ ๋ง์์ ๋๋ฆฝ๋๋ค.
ํ์ฌ ๊ธฐ๋ณธ์ผ๋ก ๊ทธ๋ํ์ ์ค๋ฅธ์ชฝ์ Legend๊ฐ ํ์๋๋๋ก ๋์ด์๋ ๊ฒ ๊ฐ์๋ฐ,
์ด๊ฒ์ ํฌ์ง์ ์ ๊ทธ๋ํ ํ๋จ์ด๋ ์์ชฝ์ผ๋ก ์ฎ๊ธธ ์ ์๋ Param์ด ๋ณ๋๋ก ์ ๊ณต๋์ด์๋ ๊ฒ์ด ์๋์ง์?
๊ฐ์ฌํฉ๋๋ค.
y์ถ๋ฐฐ์ด์ ๋ด๋ฆผ์ฐจ์์ผ๋ก ๋ฐ๊ฟ์ ๊ทธ๋ํ๋ฅผ ํํ ํ ์ ์๋์?
์๋ค๋ฉด ๋ฐฉ๋ฒ์ ์๋ ค์ฃผ์ธ์.
// Write example code
If some region has no data, it should colored by default color
๋ณดํต์ ์ฐจํธ์์๋ ๊ฐ์ด ํด์๋ก, ๋ฐ์ดํฐ๊ฐ ๋ ๋์ ์์น์ ํํ๋๋ค.
ํ์ง๋ง ๋ญํน๊ฐ์ ๋ฐ์ดํฐ์ ํํ์ ๊ฐ์ด ๋ฎ์์๋ก ๋ ๋์ ๋ฑ๊ธ์ ๊ฐ์์ผ๋ก ๋ ๋์ ์์น์ ํํํ๊ณ ์ถ์ ์ ์๋ค
yAxis.invert
์ต์
์ ์ถ๊ฐํ์ฌ ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ด ๋ฎ์ ๊ฐ์ด ๋ ๋์ ์์น์ ํํ๋๋๋ก ํ๋ค.var options = {
yAxis: {
invert: true
},
chart: {
...
},
xAxis: {
...
},
...
};
yAxis.invert
์ต์
์ ์ปฌ๋ผ์ฐจํธ์๋ ๋๊ฐ์ด ์ ์ฉ.npm run test
v2.14.2
Chrome
Legend pagination next button(down arrow) is not showing
var container = document.getElementById('chart-area');
var data = {
categories: ['Browser'],
series: [
{
name: 'Chrome',
data: 46.02
},
{
name: 'IE',
data: 20.47
},
{
name: 'Firefox',
data: 17.71
},
{
name: 'Safari',
data: 5.45
},
{
name: 'Opera',
data: 3.10
},
{
name: 'Etc',
data: 7.25
},
{
name: 'Chrome',
data: 46.02
},
{
name: 'IE',
data: 20.47
},
{
name: 'Firefox',
data: 17.71
},
{
name: 'Safari',
data: 5.45
},
{
name: 'Opera',
data: 3.10
},
{
name: 'Etc',
data: 7.25
},
{
name: 'Chrome',
data: 46.02
},
{
name: 'IE',
data: 20.47
},
{
name: 'Firefox',
data: 17.71
},
{
name: 'Safari',
data: 5.45
},
{
name: 'Opera',
data: 3.10
},
{
name: 'Etc',
data: 7.25
},
{
name: 'Chrome',
data: 46.02
},
{
name: 'IE',
data: 20.47
},
{
name: 'Firefox',
data: 17.71
},
{
name: 'Safari',
data: 5.45
},
{
name: 'Opera',
data: 3.10
},
{
name: 'Etc',
data: 7.25
},
{
name: 'Chrome',
data: 46.02
},
{
name: 'IE',
data: 20.47
},
{
name: 'Firefox',
data: 17.71
},
{
name: 'Safari',
data: 5.45
},
{
name: 'Opera',
data: 3.10
},
{
name: 'Etc',
data: 7.25
}
]
};
var options = {
chart: {
width: 500,
height: 400,
title: 'Usage share of web browsers'
},
tooltip: {
suffix: '%'
}
};
tui.chart.pieChart(container, data, options);
Legend pagination next button(down arrow) should be showing
Run it! ๋ฒํผ์ ๋๋ฌ๋ ๋ฐ์์ด ์๋๋ฐ์. ํ์ธ ๋ถํํด์.
// Write example code
If this option is enabled, spectrum legend label shows in descending order
์๋
ํ์ธ์.
์๋์ ์ฌ์ดํธ์์ chart ์ฌ์ฉํ๋ ๊ฒ์ ๋ณด๊ณ ์ฌ๊ธฐ๊น์ง ์ค๊ฒ๋์๋ค์
https://analytics.toast.com/analysis/leaveUser?appCode=p0HaZlgr&from=20170618&to=20170718
๊น๋ํ๊ณ ์ ๊ฐ ์ํ๋ ๊ธฐ๋ฅ์ด ๋ชจ๋ ๋ค์ด๊ฐ ์์ด์ ํด๋น ์ฐจํธ๋ฅผ ์๊ฒ๋์ด ์ฌ์ฉ์ ํ๋ ค๊ณ ํ๋ค๋ณด๋,
๋ค๋ฅธ chart๋ resize๊ฐ ์ ๋๋ก ์ ์ฉ๋๋๋ฐ map chart์ ๊ฒฝ์ฐ์๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ฌ ๋ฌธ์๋ฅผ ๋๋ฆฌ๊ฒ ๋์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ์ต๋ํ, ์ต์ํ ํ๊ฑฐ๋ ํ ๋
chart์ resize ๊ธฐ๋ฅ์ด ์ ๋๋ก ๋์๋์ง ์์ต๋๋ค. ๊ทธ๋์ ๋ณ๊ฒฝ์ด ๋ ๋ (resize) ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น๊ฒ ํ์๋๋ฐ ์ข์ ๋ฐฉ๋ฒ์ ์๋ ๊ฒ ๊ฐ์์..
๋ฐ์์๊ฒ ์ง๋ง, ํด๋น ๋ถ๋ถ๋ค์ ๋ํด์ ํผ๋๋ฐฑ ์ฃผ์๋ฉด ์ ๋ง ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.
v2.14.2
Chrome, OSX
yAxis width is wider than the actual value labels(0.01, 0.02, ..., 0.07) width
yAxis width should fit to the actual labels
|
var container = document.getElementById('chart-area');
var data = {
categories: ['12/22/2017', '12/23/2017', '12/24/2017'],
series: [{
name: 'name',
data: [0.06, 0.05, 0.05]
}]
};
var options = {
chart: {
format: '1,000',
height: 350,
width: 555.4444
},
xAxis: {
type: 'datetime',
dateFormat: 'bb์ผ'
},
yAxis: {
min: 0,
labelInterval: 2
},
series: {
showDot: false,
zoomable: false,
showLabel: false
},
legend: {
visible: false
}
};
var theme = {
series: {
colors: ['#ff7170']
}
};
// For apply theme
tui.chart.registerTheme('lineTheme', theme);
options.theme = 'lineTheme';
var chart = tui.chart.lineChart(container, data, options);
map chart ์์ tooltip์ ํญ์ ๋ ์๊ฒ ํ ์ ์๋์??
์๋๋ฉด showLabel=true์ผ ๋ label์ ์ปค์คํฐ๋ง์ด์ง ํ ์ ์๋์??? tooltip ์ฒ๋ผ html ํ๊ทธ๋ฅผ ์ฌ์ฉํด์์.
3.0.1
Mac, chrome
An error appears in the group tooltip with no legend area.
// Write example code
When, a series is selected in the legend area, the serie pops to front.
If a series is 4th series, it would showed on the top of other series.
However, when hover on this poped series, tooltip showed the first series.
This means that, although series order was reordered, tooltip order is not.
Tooltip should be reordered too.
3.0.1
Chrome V64.0.3282.186 Mac
The zIndex of export menu is higher than tooltip lead to the tooltip is covered by the export menu.
Tooltip will not cover by export menu
v2.14.2
Chrome, OSX
excel data export UTF-8 encoding error
React, Chrome
First of all, thanks a lot for providing such an awesome library!
I have an issue that the custom-event-area is not put on top of the svg chart area. As shown in the image below, both the export-menu and event-area div's are all placed below the chart.
I tried the absolute position but with no luck.
<div id="chart-area" style={{position: 'absolute'}} />
Did I miss anything? Below is the full code that I tested.
import React, { Component } from 'react';
import TuiChart from 'tui-chart';
class TestTuiChart extends Component {
componentDidMount() {
var container = document.getElementById('chart-area');
var data = {
categories: ['01/01/2016', '02/01/2016', '03/01/2016', '04/01/2016', '05/01/2016', '06/01/2016', '07/01/2016', '08/01/2016', '09/01/2016', '10/01/2016', '11/01/2016', '12/01/2016'],
series: [
{
name: 'Seoul',
data: [-3.5, -1.1, 4.0, 11.3, 17.5, 21.5, 24.9, 25.2, 20.4, 13.9, 6.6, -0.6]
},
......
]
};
var options = {
chart: {
width: 700,
height: 400,
title: '24-hr Average Temperature'
},
......
};
TuiChart.lineChart(container, data, options);
}
render() {
return (
<div id="chart-area" style={{position: 'absolute'}}>
</div>
)
}
}
export default TestTuiChart;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.