Giter VIP home page Giter VIP logo

jelly-chart's Introduction

npm version

Jelly-Chart

Jelly-Chart is a chart library based on D3v4 and SVG.

chart-types

Chart Types

Documents

Download && Installation

Download

Use CDN

<!-- jsDelivr -->
<script src="//cdn.jsdelivr.net/npm/jelly-chart/dist/jelly.min.js"></script> 
<!-- unpkg -->
<script src="//unpkg.com/jelly-chart/dist/jelly.min.js"></script> 

Install from NPM

$ npm install --save jelly-chart

Dependency

D3 (required)
4+

HTML

<!-- Load D3 and jelly-chart separately -->
<!-- Load D3 first-->
<script src="//d3js.org/d3.v4.min.js"></script>    
<!-- Load jelly-chart after D3 -->
<script src="$PATH/jelly.min.js"></script>

ES6 Module

Jelly-Chart is written using ECMAScript 6 modules. After importing it, you can create a custom bundle using your preferred bundler.

import jelly from "jelly-chart";

Basic Usage

1) Insert a chart holder element

<div id="chart"></div>

2) Call a chart generator

var bar = jelly.bar();
//or
var bar = jelly.type('bar');

3) set a container, data and options, then render

bar.container('#chart')
  .data([
    {x: 'A', y: 10},
    {x: 'A', y: 20},
    {x: 'B', y: 15},
    {x: 'B', y: 10}
  ])
  .dimensions(['x'])
  .measures(['y'])

bar.render();

To find more detailed usages, check Demo and API Docs.

Development

Use NPM Script to build Jelly-chart

# Install dependencies
$ npm install

# Run dev-server for development
$ npm start

# Test
$ npm test

# Build
$ npm run build

** CONTRIBUTING ** Fork to modify or update the content, then modify and request with Pull Request!

LICENSE

GPL-3.0+

jelly-chart's People

Contributors

guruahn avatar luinhon avatar peikin avatar srjung7 avatar yonggeon-shin avatar

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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jelly-chart's Issues

Marker Map 의존성 문제.

마침 marker map 유형 필요해서 젤리차트를 써보려고 했으나...
1차로

Uncaught ReferenceError: daum is not defined

카카오 맵 sdk 를 필요로 하기에 직접 sdk 를 로드한 다음, 샘플 코드를 넣고 다시 확인해 봤더니 render 단계에 문제가 발생합니다.

kakao.js:3 Error: <ellipse> attribute cx: Expected length, "NaN".
Yb @ kakao.js:3
ob.bd @ kakao.js:68
c.v @ kakao.js:140
c.U @ kakao.js:140
c.z @ kakao.js:128
target.forEach.d @ _mark.js:61
__nodes @ _mark.js:45
callback @ _mark.js:109
(anonymous) @ _mark.js:116
_mark @ _mark.js:98
process.forEach.p @ render.js:16
run @ render.js:12
render @ render.js:44
...생략

확인 한번 해주세요.

IE 11 표시

IE 에서 차트가 표시되도록 Polyfill 적용

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

resize 시에 재계산

resize 시에 차트 구성 요소의 위치와 사이즈가 정상적으로 동작하도록 수정

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

npm start 하니 에러가 발생하는데요.

안녕하세요.
npm start 하니 에러가 발생합니다.

환경:
window 10 64bit
npm 버전: 5.6.0
node 버전: 8.11.3

에러 로그는 아래와 같습니다.

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]prestart: [email protected]
6 info lifecycle [email protected]
start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true

9 verbose lifecycle [email protected]start: CWD: D:\test\jelly-chart
10 silly lifecycle [email protected]
start: Args: [ '/d /s /c', 'http-server -c-1 | rollup -c --watch' ]
11 silly lifecycle [email protected]start: Returned: code: 255 signal: null
12 info lifecycle [email protected]
start: Failed to exec start script
13 verbose stack Error: [email protected] start: http-server -c-1 | rollup -c --watch
13 verbose stack Exit status 255
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd D:\test\jelly-chart
16 verbose Windows_NT 10.0.17134
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
18 verbose node v8.11.3
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 255
22 error [email protected] start: http-server -c-1 | rollup -c --watch
22 error Exit status 255
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 255, true ]

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.