Code Monkey home page Code Monkey logo

tui.chart's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tui.chart's Issues

Loading chart data from a file

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?

resize() api not working

Version

3.0.1

Development Environment

mac, chrome

Current Behavior

resize() api is not working at line chart

var chart = tui.chart.lineChart(container, data, options);

chart.resize({
    width: 500,
    height: 500
});

Expected Behavior

Tooltips are not reordered after a series is selected in the legend area

Version

Development Environment

Current Behavior

// Write example code

Expected Behavior

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.

Using tow y Axes in a combo chart

์•ˆ๋…•ํ•˜์„ธ์š”.
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'
}]

If a series is selected inside legend area, selected series must have priority in mouse events

Version

v2.15.0

Development Environment

Chrome, OSX

Current Behavior

2018-02-05 5 32 15
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);

Expected Behavior

When ๋‹ฌ๋ ฅ is selected inside legend area. It should show tooltip of ๋‹ฌ๋ ฅ.

show only integer values on axis

Version

v2.14.2

Development Environment

Chrome, OSX

Current Behavior

Value axis shows decimals.
However count cannot be decimals. I don't need decimal ticks
2018-01-30 10 40 23

Steps to reproduce

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);

Expected Behavior

Value axis shows integer only.
HighChart supports it:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/allowdecimals-false/

map chart์—์„œ..

map chart ์—์„œ tooltip์„ ํ•ญ์ƒ ๋– ์žˆ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‚˜์š”??
์•„๋‹ˆ๋ฉด showLabel=true์ผ ๋•Œ label์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•  ์ˆ˜ ์žˆ๋‚˜์š”??? tooltip ์ฒ˜๋Ÿผ html ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด์„œ์š”.

Resize fail on null data

์•ˆ๋…•ํ•˜์„ธ์š”.

๋ฒ„๊ทธ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์•„ ๊ธ€์„ ์”๋‹ˆ๋‹ค.
line ์ฑ ํŠธ์—์„œ showDot ์˜ต์…˜์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ณ  categories์— ํ•ด๋‹นํ•˜๋Š” ๊ฐ’์„ null์„ ์ฃผ์–ด ํ‘œ์‹œ๋Š” ํ•˜๊ณ  ์žˆ์ง€ ์•Š๋Š” ๊ฐ’์ด ์žˆ์„ ๋•Œ(์ฒ˜์Œ, ๋งˆ์ง€๋ง‰์„ null๋กœ ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.) resize ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด item.endDot์ด undefined๋ผ item.endDot.dot์—์„œ
Unhandled rejection TypeError: Cannot read property 'dot' of undefined ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

Legend pagination `next` button is not showing

Version

v2.14.2

Development Environment

Chrome

Current Behavior

Legend pagination next button(down arrow) is not showing
2018-01-29 6 25 53

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);

Expected Behavior

Legend pagination next button(down arrow) should be showing
2018-01-29 6 26 34

due date: 2018.2.23

barChar์—์„œ ์นดํ…Œ๊ณ ๋ฆฌ ๋ฐ์ดํ„ฐ ๋ฌธ์˜๋“œ๋ ค์š”

ํ˜น์‹œ ์นดํ…Œ๊ณ ๋ฆฌ๋‚˜ ๋ฐ์ดํ„ฐ๊ฐ™์€๊ฒฝ์šฐ ๋ฐฐ์—ด ๊ทธ ์ž์ฒด๋กœ ๋„ฃ์„์ˆ˜ ์žˆ๋‚˜์š”?
์˜ˆ๋ฅผ๋“ค์–ด
var container = document.getElementById('chart');
var data = {
categories: [title],
series: [{
name: '๋‚จ์ž',
data: [data1]
},{
name: '์—ฌ์ž',
data: [data2]
}]
};
์œ„์™€๊ฐ™์€๊ฒฝ์šฐ title, data1, data2๊ฐ€ ๋ฐฐ์—ด์ž์ฒด์ธ ์ƒํƒœ์ธ๋ฐ ์œ„์™€๊ฐ™์ด ํ•˜๋ฉด ํ™”๋ฉด์ด ๋‹ค ๊นจ์ง€๋Š”๋ฐ ์–ด์ฐŒ ์‚ฌ์šฉํ•˜๋Š”๊ฒŒ ์ข‹์„๊นŒ์š”?

ํˆดํŒ ํ‘œ์‹œ ์˜ค๋ฅ˜ ๋ฌธ์˜

๊ทธ๋ž˜ํ”„๋ฅผ ๋‘๊ฐœ ๊ทธ๋ฆด ๊ฒฝ์šฐ, ๋‘๋ฒˆ์งธ ๊ทธ๋ž˜ํ”„์˜ ํˆดํŒ์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
์ •ํ™•ํžˆ๋Š” ์ฒซ๋ฒˆ์งธ ๊ทธ๋ž˜ํ”„ ํˆดํŒ์ด ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ์œผ๋กœ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ผ์ธ์ฐจํŠธ๋ฅผ ๋‘๊ฐœ ๊ทธ๋ฆฌ๋Š”๋ฐ ์ฒซ๋ฒˆ์งธ ๊ทธ๋ž˜ํ”„์—” ๋ฐ์ดํ„ฐ๊ฐ€ ํ•˜๋‚˜๊ณ , ๋‘๋ฒˆ์งธ ๊ทธ๋ž˜ํ”„์— ์—ฌ๋Ÿฌ๊ฐœ์ธ ๊ฒฝ์šฐ,
๋‘๋ฒˆ์งธ ๊ทธ๋ž˜ํ”„์˜ ์ฒซ ๋ฐ์ดํ„ฐ๋งŒ ํˆดํŒ์ด ์œ„์ชฝ ๊ทธ๋ž˜ํ”„์— ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

ํˆดํŒ์„ ๊ทธ๋ž˜ํ”„๋“ค์ด ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ž…๋‹ˆ๋‹ค.
ํ™•์ธ ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค^^

line chart ๋ช‡ ๊ฐ€์ง€ ๋ฌธ์˜

์•ˆ๋…•ํ•˜์„ธ์š”.
ํด๋ผ์šฐ๋“œํ”Œ๋žซํผ๊ฐœ๋ฐœํŒ€ ์‹ ์ง„ํ˜ธ ์ž…๋‹ˆ๋‹ค.

line chart์—์„œ ๋ช‡ ๊ฐ€์ง€ ๊ถ๊ธˆํ•œ๊ฒŒ ์žˆ์–ด์„œ ๋ฌธ์˜ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

  1. ๊ฐ€์šด๋ฐ ์ •๋ ฌ?
    ๋งŒ์•ฝ ๊ฐ’์ด ํ•˜๋‚˜ ๋งŒ ์žˆ์„ ๊ฒฝ์šฐ, ์ฐจํŠธ ์™ผ์ชฝ ๊ตฌ์„์— ์œ„์น˜ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ์ด ๋•Œ ๊ฐ€์šด๋ฐ ์œ„์น˜ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

  2. series ์ƒ‰ ๋ณ€๊ฒฝ
    Defaul ์ƒ‰์ธ ๋นจ๊ฐ•, ์ฃผํ™ฉ ์™ธ ๋‹ค๋ฅธ ์ƒ‰์œผ๋กœ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์€๋ฐ, ์–ด๋–ป๊ฒŒ ์„ค์ •ํ•ด์•ผ๋˜๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค.

  3. ์™ผ์ชฝ, ์˜ค๋ฅธ์ชฝ padding?
    ๊ฐ’๋“ค์„ ๋„ฃ์œผ๋ฉด ์–‘ ๋์˜ ๊ฐ’๋“ค์€ ์–‘ ๋ ์ชฝ์— ์œ„์น˜ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ์ด ๋•Œ ์•ฝ๊ฐ„ ์—ฌ์œ  ๊ณต๊ฐ„์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‚˜์š”?

๋‹ต๋ณ€ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

custom-event-area is not overlayed on svg chart area

Development Environment

React, Chrome

Current Behavior

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.

screen shot 2018-03-07 at 10 26 18 am

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;

Tooltip does not show current focused series information

Version

v2.16.0

Development Environment

Chrome, OSX

Current Behavior

Tooltip does not show current focused series information.

Reproduction Steps

  1. Select '๊ฐ์ž' on legend area
  2. Mouse over on dot point
  3. Bug: it now shows 'ํฌ๋ฆฌ์Šค๋งˆ์Šค' => It should show '๊ฐ์ž'

2018-02-19 11 22 03

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);

Expected Behavior

Tooltip should show '๊ฐ์ž'

dot์— hoverํ–ˆ์„ ๋•Œ์˜ fillColor๊ฐ€ ๊ณ„์† ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
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๋Š” ๋ฐ”๋€Œ์ง€ ์•Š์€ ๋“ฏ ํ•ฉ๋‹ˆ๋‹ค ใ… ใ… )
image

Plot bands are not generated

Version

Development Environment

Current Behavior

  1. Plot bands are not generated when data is a date type and numbers in strings are entered in the data values โ€‹โ€‹of the plot bands
  2. when adding plot dynamically, it is not create plot band, even though values are number type
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: []
	}
};

Expected Behavior

  1. It should format string to number

Bubble Chart : ๋ฐ์ดํ„ฐ๊ฐ€ ํ•˜๋‚˜๋งŒ ์žˆ์„ ๊ฒฝ์šฐ, ๊ฐ’์ด ์ค‘๋ณต๋  ๊ฒฝ์šฐ

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๋งŒ ํ‘œ๊ธฐ ์•ˆ๋จ)

์ด๋ฅผ ํ•ด๊ฒฐํ•  ๋ฐฉ๋ฒ•์ด ์—†์„๊นŒ์š”?
๋ง๋ถ™์—ฌ ์ด์ฒ˜๋Ÿผ ์ข‹์€ ํ”„๋กœ์ ํŠธ๋ฅผ ์˜คํ”ˆ์†Œ์Šค๋กœ ์ œ๊ณตํ•ด์ฃผ์…”์„œ ์ •๋ง ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

The tooltip is covered by the export menu

Version

3.0.1

Development Environment

Chrome V64.0.3282.186 Mac

Current Behavior

The zIndex of export menu is higher than tooltip lead to the tooltip is covered by the export menu.

Expected Behavior

Tooltip will not cover by export menu

ie8์—์„œ chartExportMenu๊ฐ€ ์•ˆ๋ณด์ž…๋‹ˆ๋‹ค

ie8์—์„œ bar์ฐจํŠธ๋ฅผ ์‚ฌ์šฉ ์ค‘์ž…๋‹ˆ๋‹ค. ^^
ํฌ๋กฌ์—์„œ๋Š” export ๋ฉ”๋‰ด๊ฐ€ ๋ณด์ด๋Š”๋ฐ์š”(์ •์ƒ๋™์ž‘)
ie8์—์„œ๋Š” export ๋ฉ”๋‰ด๊ฐ€ ์•ˆ๋ณด์ž…๋‹ˆ๋‹ค

tui-chart.css ์ฝ”๋“œ๋ฅผ ๋ณด๋‹ˆ~ .tui-chart-chartExportMenu-area ์— z-index:5000; ์œผ๋กœ
๋˜์–ด์žˆ๋”๊ตฐ์š”~ ์ด๋ฌธ์ œ๋Š” ์•„๋‹Œ๊ฒƒ ๊ฐ™์€๋ฐ์š”~

ie8์€ export ๊ธฐ๋Šฅ์„ ์ง€์›์•ˆํ•˜๋Š”๊ฒƒ์ธ๊ฐ€์š”?

[issue] map chart resize

์•ˆ๋…•ํ•˜์„ธ์š”.
์•„๋ž˜์˜ ์‚ฌ์ดํŠธ์—์„œ chart ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋ณด๊ณ  ์—ฌ๊ธฐ๊นŒ์ง€ ์˜ค๊ฒŒ๋˜์—ˆ๋„ค์š”
https://analytics.toast.com/analysis/leaveUser?appCode=p0HaZlgr&from=20170618&to=20170718

๊น”๋”ํ•˜๊ณ  ์ œ๊ฐ€ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์ด ๋ชจ๋‘ ๋“ค์–ด๊ฐ€ ์žˆ์–ด์„œ ํ•ด๋‹น ์ฐจํŠธ๋ฅผ ์•Œ๊ฒŒ๋˜์–ด ์‚ฌ์šฉ์„ ํ•˜๋ ค๊ณ  ํ•˜๋‹ค๋ณด๋‹ˆ,
๋‹ค๋ฅธ chart๋Š” resize๊ฐ€ ์ œ๋Œ€๋กœ ์ ์šฉ๋˜๋Š”๋ฐ map chart์˜ ๊ฒฝ์šฐ์—๋Š” ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜์—ฌ ๋ฌธ์˜๋ฅผ ๋“œ๋ฆฌ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์„ ์ตœ๋Œ€ํ™”, ์ตœ์†Œํ™” ํ•˜๊ฑฐ๋‚˜ ํ•  ๋•Œ
chart์˜ resize ๊ธฐ๋Šฅ์ด ์ œ๋Œ€๋กœ ๋™์ž‘๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ณ€๊ฒฝ์ด ๋  ๋•Œ (resize) ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜๊ฒŒ ํ•˜์˜€๋Š”๋ฐ ์ข‹์€ ๋ฐฉ๋ฒ•์€ ์•„๋‹Œ ๊ฒƒ ๊ฐ™์•„์„œ..

๋ฐ”์˜์‹œ๊ฒ ์ง€๋งŒ, ํ•ด๋‹น ๋ถ€๋ถ„๋“ค์— ๋Œ€ํ•ด์„œ ํ”ผ๋“œ๋ฐฑ ์ฃผ์‹œ๋ฉด ์ •๋ง ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

bower๋กœ tui.chart ์„ค์น˜์‹œ ์˜ค๋ฅ˜ ๋ฉ”์‹œ์ง€

์•ˆ๋…•ํ•˜์„ธ์š”.
ํด๋ผ์šฐ๋“œํ”Œ๋žซํผ๊ฐœ๋ฐœํŒ€ ์‹ ์ง„ํ˜ธ ์ž…๋‹ˆ๋‹ค.

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

ํˆดํŒ์˜ category๊ฐ’๊ณผ Axis์— ํ‘œ์‹œ๋˜๋Š” category๊ฐ’์„ ๋‹ค๋ฅด๊ฒŒ ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”?
๊ณต์œ ํ•ด์ฃผ์‹  ์ฐจํŠธ ์†Œ์Šค ๊ฐ์‚ฌํžˆ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
ํ˜น์‹œ ํˆดํŒ์— ํ‘œ์‹œ๋˜๋Š” 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;
}

๊ฒฐ๊ณผ
image

ํ˜„์žฌ ๋‘ ๊ฐ’์ด ๋˜‘๊ฐ™์ง€๋งŒ ํˆดํŒ์—๋งŒ ๋…„๋„๊ฐ€ ํ‘œ์‹œ๋˜๋„๋ก ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์–ด ํฌ๋งท์„ ๋ณ€๊ฒฝํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค

xAxis ์˜ต์…˜ ๋ณ€๊ฒฝ

getDateFormat = function(){
	if(period === 'recentWeek')
		return 'M.dd';
	else(period === 'recentYear')
		return 'M์›”';
};
...
var options = { 
   xAxis: {
        type: 'datetime',
        dateFormat: getDateFormat()
   }
}

๊ฒฐ๊ณผ
image

์œ„ ๊ฒฐ๊ณผ์ฒ˜๋Ÿผ xAxis์˜ ๋ฐ์ดํ„ฐ ํฌ๋งท์„ ๋ณ€๊ฒฝํ•˜๋ฉด ํˆดํŒ์˜ category๋„ ๋™์‹œ์— ๋ณ€๊ฒฝ๋˜์–ด ๋ฒ„๋ฆฝ๋‹ˆ๋‹ค.

ํฌ๋งท ๋ณ€๊ฒฝ ์™ธ์—๋„ beforeShowTooltip ๋“ฑ์œผ๋กœ ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด๋ณด๋ ค ํ•˜์˜€๋Š”๋ฐ, '12์›”' ๋“ฑ์œผ๋กœ ์นดํ…Œ๊ณ ๋ฆฌ ๊ฐ’์ด ๋จผ์ € ๊ฒฐ์ •๋˜๋ฉด ์ถ”๊ฐ€์ ์ธ ๋…„๋„ ์ •๋ณด๋ฅผ ํˆดํŒ์— ํ‘œ์‹œํ•  ์ˆ˜๊ฐ€ ์—†๋„ค์š” ใ… .ใ… 

ํˆดํŒ ํ…œํ”Œ๋ฆฟ ๋ณ€์ˆ˜ ์ค‘ item ์˜ค๋ธŒ์ ํŠธ์— ํฌ๋งท ๋ณ€๊ฒฝ ์ „ ์นดํ…Œ๊ณ ๋ฆฌ ๊ฐ’์ด ๋“ค์–ด๊ฐ€๋ฉด ๊ฐ€๋Šฅํ•  ๋“ฏ๋„ ํ•œ๋ฐ์š”, ์ œ๊ฐ€ ์ฐพ์ง€ ๋ชปํ•œ ๋ฐฉ๋ฒ•์ด ์žˆ์„์ง€ ์—ฌ์ญค๋ด…๋‹ˆ๋‹ค.

offset option for axis title does not work

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 :)

graph when the smaller data is better

์ด์Šˆ์˜ ๊ฐœ์š”

๋ณดํ†ต์˜ ์ฐจํŠธ์—์„œ๋Š” ๊ฐ’์ด ํด์ˆ˜๋ก, ๋ฐ์ดํ„ฐ๊ฐ€ ๋” ๋†’์€ ์œ„์น˜์— ํ‘œํ˜„๋œ๋‹ค.
ํ•˜์ง€๋งŒ ๋žญํ‚น๊ฐ™์€ ๋ฐ์ดํ„ฐ์˜ ํ‘œํ˜„์€ ๊ฐ’์ด ๋‚ฎ์„์ˆ˜๋ก ๋” ๋†’์€ ๋“ฑ๊ธ‰์˜ ๊ฐ’์ž„์œผ๋กœ ๋” ๋†’์€ ์œ„์น˜์— ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์„ ์ˆ˜ ์žˆ๋‹ค

๊ตฌํ˜„ ๊ฐ€์ด๋“œ

  • ์ฐจํŠธ๋Š” ์ฝ”๋“œ๋Š” ํฌ๊ฒŒ components, helpers, models, plugins ์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์œผ๋ฉฐ src/js/ ๋ฐ‘์— ๊ฐ๊ฐ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ๊ตฌ๋ถ„๋˜์–ด ์žˆ๋‹ค.
  • helpers๋Š” ์œ ํ‹ธ๋ฆฌํ‹ฐ ๋ชจ์Œ, models์€ ๋ฐ์ดํ„ฐ ๊ฐ€๊ณต, plugins๋Š” svg๋ฅผ ์‹ค์ œ๋กœ ๊ทธ๋ฆฌ๊ธฐ ์œ„ํ•œ raphael ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™•์žฅํ•˜์—ฌ ๊ตฌํ˜„๋œ ๋ถ€๋ถ„์ด๋‹ค
  • components๋Š” ์ฐจํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์žˆ๋Š” ๊ตฌ์„ฑ์š”์†Œ๋“ค(์ถ•(axis), ๋ ˆ์ „๋“œ(legend), ๋งˆ์šฐ์Šค์ด๋ฒคํŠธ๋ฐํ…ํ„ฐ(eventdetector), ์ฐจํŠธ์— ๋ฐฐ๊ฒฝ์ด ๋˜๋Š” ๊ตฌ๋ถ„์„ (plot), ์ฐจํŠธ๋ฅผ ๊ทธ๋ฆฌ๋Š” ๋ถ€๋ถ„(series), ํˆดํŒ(tooltip)) ์ด๋‹ค
  • ๊ฐ๊ฐ์˜ component๋ฅผ ์ฐจํŠธ ์‚ฌ์šฉ์ž๊ฐ€ ์ œ์–ดํ• ์ˆ˜ ์žˆ๋„๋ก component๋ณ„๋กœ ์˜ต์…˜์„ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋‹ค
  • ์ฐจํŠธ์˜ ์‚ฌ์šฉ์˜ˆ์ œ๋‚˜ ์˜ต์…˜์€ api & example ๋ฌธ์„œ์™€ wiki๋ฌธ์„œ์—์„œ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ด ์ด์Šˆ์˜ ์ฃผ๋กœ ์ˆ˜์ •ํ•ด์•ผํ•  ์ฝ”๋“œ๋Š” components์˜ axis, plot, series ๋ถ€๋ถ„์ด๋‹ค.

์š”๊ตฌ ์‚ฌํ•ญ

  • line์ฐจํŠธ์— yAxis.invert ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์•„๋ž˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด ๋‚ฎ์€ ๊ฐ’์ด ๋” ๋†’์€ ์œ„์น˜์— ํ‘œํ˜„๋˜๋„๋ก ํ•œ๋‹ค.
var options = {
    yAxis: {
        invert: true
    },
    chart: {
        ...
    },
    xAxis: {
        ...
    },
    ...
};

2018-05-02 6 26 03

์„ ํƒ ์š”๊ตฌ ์‚ฌํ•ญ

  • ์œ ๋‹› ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ž‘์„ฑ
  • yAxis.invert ์˜ต์…˜์„ ์ปฌ๋Ÿผ์ฐจํŠธ์—๋„ ๋˜‘๊ฐ™์ด ์ ์šฉ.

์ปค๋ฐ‹ ๋ฉ”์„ธ์ง€ ๊ฐ€์ด๋“œ(๋งํฌ)

๊ฐœ๋ฐœ ํ™˜๊ฒฝ

  • ํ”„๋กœ์ ํŠธ ๋‚ด์˜ ESLint ์ค€์ˆ˜
  • TC ์ž‘์„ฑ ๋ฐ ํ†ต๊ณผ
npm run test
  • ๊ธฐ๋Šฅ ๊ตฌํ˜„ ์‹œ ๋ฐ๋ชจ์šฉ ํŽ˜์ด์ง€๋Š” examples ํด๋” ํ•˜์œ„์— ์ƒ์„ฑ
  • ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง•
    • ํ”„๋กœ์ ํŠธ README.md ์— ํ‘œ์‹œ๋˜์–ด ์žˆ๋Š” Browser Support ์ฐธ๊ณ 

legend ํ‘œ์‹œํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ category ์˜ค๋ฅธ์ชฝ ํ…์ŠคํŠธ๊ฐ€ ์ž˜๋ ค ๋ณด์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
legend์˜ ์˜ต์…˜์„ visible : false๋กœ ๋ณ€๊ฒฝํ•˜์˜€์„ ๋•Œ,
์˜ค๋ฅธ์ชฝ ๋์˜ ์นดํ…Œ๊ณ ๋ฆฌ ํ…์ŠคํŠธ๊ฐ€ ์ž˜๋ ค์„œ ๋‚˜์˜ค๊ฒŒ ๋˜๋Š” ์ด์Šˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
legend๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ทธ๋ž˜ํ”„์˜ ์นดํ…Œ๊ณ ๋ฆฌ์— ๋Œ€ํ•ด ์•ฝ๊ฐ„์˜ ๊ณต๊ฐ„์ด ์žˆ์œผ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์€๋ฐ,
ํ˜น์‹œ ๋‹ค๋ฅธ ํ•ด๊ฒฐ ๊ฐ€๋Šฅํ•œ ๋ฐฉ๋ฒ•์ด ์žˆ์„์ง€์š”?

legend: {
	visible: false,
	showCheckbox: false,
},

image

Getting Started๋‚ด ์˜ˆ์ œ์—์„œ ๋ฌธ์ œ์  ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”.

์šฐ์„  ์ด๋ ‡๊ฒŒ ์ข‹์€ ์˜คํ”ˆ์†Œ์Šค ํ™œ๋™์„ ํ•ด์ฃผ์‹œ๋Š” ๋ฐ์— ์žˆ์–ด์„œ ์กด๊ฒฝ๊ณผ ๊ฐ์‚ฌ์˜ ๋ง์”€์„ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

https://github.com/nhnent/tui.chart/wiki/getting-started#create-chart
์— ์žˆ๋Š” ์˜ˆ์ œ์—์„œ ์กฐ๊ธˆ ์ด์ƒํ•œ ๋ถ€๋ถ„์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.
์˜ˆ์ œ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉ์„ ํ•˜๊ณ , barChart๋ฅผ ๋ Œ๋”๋ง์„ ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒฝ์šฐ์—

image

Legend1 ์— ๋Œ€ํ•ด์„œ ์ฒซ๋ฒˆ ์งธ bar๊ฐ€ ๋ Œ๋”๋ง์ด ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Data ๊ฐ’์„ ๋ฐ”๊ฟ”๋ดค๋”๋‹ˆ ๋˜ ์ œ๋Œ€๋กœ ๋ Œ๋”๋ง์ด ๋˜๋”๋ผ๊ตฌ์š”..
image

ํ˜น์‹œ ์˜ˆ์ œ์˜ ๋ฐ์ดํ„ฐ๋กœ ํ–ˆ์„ ๋•Œ ๊ฐ’์ด ์•ˆ ๋‚˜์˜ค๋Š” ์ด์œ ๊ฐ€ ์žˆ์„๊นŒ์š”?

Legend ์œ„์น˜ ๋ณ€๊ฒฝ์„ ์œ„ํ•œ option์ด ์žˆ๋Š”์ง€์š”?

์•ˆ๋…•ํ•˜์„ธ์š”.

์šฐ์„  ์ด๋ ‡๊ฒŒ ์ข‹์€ ์˜คํ”ˆ์†Œ์Šค ํ™œ๋™์„ ํ•ด์ฃผ์‹œ๋Š” ๋ฐ์— ์žˆ์–ด์„œ ์กด๊ฒฝ๊ณผ ๊ฐ์‚ฌ์˜ ๋ง์”€์„ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

ํ˜„์žฌ ๊ธฐ๋ณธ์œผ๋กœ ๊ทธ๋ž˜ํ”„์˜ ์˜ค๋ฅธ์ชฝ์— Legend๊ฐ€ ํ‘œ์‹œ๋˜๋„๋ก ๋˜์–ด์žˆ๋Š” ๊ฒƒ ๊ฐ™์€๋ฐ,

์ด๊ฒƒ์˜ ํฌ์ง€์…˜์„ ๊ทธ๋ž˜ํ”„ ํ•˜๋‹จ์ด๋‚˜ ์œ„์ชฝ์œผ๋กœ ์˜ฎ๊ธธ ์ˆ˜ ์žˆ๋Š” Param์ด ๋ณ„๋„๋กœ ์ œ๊ณต๋˜์–ด์žˆ๋Š” ๊ฒƒ์ด ์žˆ๋Š”์ง€์š”?

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

yAxis width is wider than the actual label width

Version

v2.14.2

Development Environment

Chrome, OSX

Descriptions

Current

yAxis width is wider than the actual value labels(0.01, 0.02, ..., 0.07) width
2018-01-30 9 35 29

Expected

yAxis width should fit to the actual labels
2018-01-30 9 32 02 |

Steps to reproduce

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);

Tutorial page typo

In Create Chart

  • options: ---> options=
  • chart: { ... } ---> chart: { ... },

tooltip ํ…œํ”Œ๋ฆฟ ์‚ฌ์šฉ์‹œ ํ•œ๊ธ€ ํ…์ŠคํŠธ์— ๋Œ€ํ•ด ์ค„๋ฐ”๋€œ ํ˜„์ƒ

์•ˆ๋…•ํ•˜์„ธ์š”
ํˆดํŒ ํ‘œ์‹œ ๊ด€๋ จํ•˜์—ฌ ๋ฌธ์˜๋“œ๋ฆฝ๋‹ˆ๋‹ค.
ํˆดํŒ ์˜ต์…˜์— ํ…œํ”Œ๋ฆฟ ์ ์šฉ์‹œ ์ถ”๊ฐ€์ ์ธ ํ…์ŠคํŠธ๋ฅผ ๋„ฃ์œผ๋ฉด ํ•œ๊ธ€๋งŒ ์ค„๋ฐ”๋€œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ ๋‘ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด value๊ฐ’ ๋‹ค์Œ์— ์ˆซ์ž, ํŠน์ˆ˜๋ฌธ์ž(%,! ๋“ฑ...), ์˜๋ฌธ์ž๋Š”
value๊ฐ’๊ณผ ํ•จ๊ป˜ ํ•œ ์ค„๋กœ ์ฒ˜๋ฆฌ๊ฐ€ ๋˜์ง€๋งŒ ํ•œ๊ธ€๋งŒ ์ค„์ด ๋ฐ”๋€Œ์–ด์„œ ์ฒ˜๋ฆฌ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.
image
image

ํ…œํ”Œ๋ฆฟ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

tooltip : {
  offsetY: -40,
    offsetX: -5,
      template: function(category, item) {
        var html =  '<time class="date">'+category+'</time>'
              + '<strong class="count">'+item.value+'ํšŒ'+'</strong>'
        return html;
      }
},

๊ฐ’๊ณผ ๋‹จ์œ„๋ฅผ ๋ถ™์—ฌ์„œ ํ‘œ๊ธฐ๋ฅผ ํ•˜๊ณ  ์‹ถ์€๋ฐ, ๋ฐฉ๋ฒ•์ด ์—†๋Š”์ง€์š”?

Legend label color is always black

Version

Development Environment

OS: Windows 10 x64
Browser: Firefox & chrome (latest version)

Current Behavior

Legend label color is always black, even when i set another color on the theme.
image

    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);

Expected Behavior

Color of the legend should change when you set a different label color.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.