https://github.com/xgfe/xcharts

charts based on D3.js
https://github.com/xgfe/xcharts

Last synced: 11 days ago
JSON representation

charts based on D3.js

• Host: GitHub
• URL: https://github.com/xgfe/xcharts
• Owner: xgfe
• Created: 2015-12-02T11:53:35.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-11-26T14:25:03.000Z (almost 6 years ago)
• Last Synced: 2024-10-26T18:45:09.160Z (18 days ago)
• Language: JavaScript
• Homepage: http://xgfe.github.io/xCharts
• Size: 4.2 MB
• Stars: 15
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: ChangeLog.md

Awesome Lists containing this project

README

        
# xCharts   

## Installation   

You can choose one of the following methods：  

-  Use NPM.    

  ```  

  npm install xg-xcharts

  ```   

-  Download [source code](https://github.com/xgfe/xCharts/release) in github.

## Get Started  

1. Add xCharts to your project.   

  

  ```

		

			

			My first xCharts demo

			  

			

			

			

		

		

			


			

			

			

			

			

			

			

		

  

  ```   

2. Use xCharts to create a chart.  


  ```  

var chart = xCharts(document.querySelector('#chartContainer'));

var option = {

		title: {

		    text: '单轴折线图-示例',

		},

		legend: {

		    data: ['网易','腾讯'],

		    x: 'center'

		},

		tooltip: {

		    trigger: 'axis'

		},

		xAxis: [

		    {

		        type: 'category',

		        data: ['一', '二', '三', '四', '五', '六', '日'],

		        tickFormat: function(data) {

		            return '周'+data;

		        }

		    }

		],

		yAxis: [

		    {

		        type: 'value',

		    }

		],

		resize: {

		    enable:true

		},

		series: [

		    {

		        type: 'line',

		        name: '网易',

		        data: [100, 230, 500, 160, 402, 340, 380]

		    },

		    {

		        type: 'line',

		        name: '腾讯',

		        data: [300, 450, 347, 792, 325, 683, 123]

		    }

		]

};

chart.loadConfig(option);

  ```

  

  If your project support AMD, code like this.  

  ```

require(['xCharts'],function(xCharts){

	// your code  

	// ...

});

  ```  

 

  Or your project support CMD, code like this.  

  ```

var xCharts = require('xCharts');

// your code   

// ... 

  ```

## More examples 

You can access [http://xgfe.github.io/xCharts/](http://xgfe.github.io/xCharts/) for more examples and API documents.  

## Contact  

- @scliuyang ([email protected])  

- @chenwubai ([email protected])

- @young ([email protected])