전단 개발 자가 자주 사용 하 는 9 개의 JavaScript 도표 라 이브 러 리
25212 단어 전단 개발JavaScript도표 라 이브 러 리웹 전단
모든 조직 에 있어 데이터, 시각 화 된 데이터 와 분석 데 이 터 를 충분히 얻 을 수 있다 면 데이터 가 발생 하 는 심층 적 인 원인 을 파악 하고 이에 따라 정확 한 결정 을 내 릴 수 있 도록 어느 정도 도움 이 될 것 이다.
전단 개발 자 에 게 대화 형 웹 페이지 의 데이터 시각 화 기술 을 습득 할 수 있다 면 좋 은 기능 이다.물론 일부 자 바스 크 립 트 의 도표 라 이브 러 리 를 통 해 전단 의 데이터 시각 화 를 더욱 쉽게 할 수 있다.이러한 라 이브 러 리 를 사용 하면 개발 자 는 서로 다른 문법 이 가 져 온 프로 그래 밍 난 제 를 고려 하지 않 아 도 데 이 터 를 이해 하기 쉬 운 도표 로 쉽게 전환 할 수 있다.
다음은 선택 한 9 개의 JavaScript 도표 라 이브 러 리 입 니 다.
Chart.js
Chart. js 는 간결 하고 사용자 친화 적 인 도표 라 이브 러 리 이자 HTML 5 를 기반 으로 하 는 자바 스 크 립 트 라 이브 러 리 로 애니메이션, 대화 형, 사용자 정의 도표 와 도형 을 만 드 는 데 사용 된다.
Chart. js 를 통 해 사용 자 는 혼합 도표 유형 을 쉽게 직관 적 으로 볼 수 있다.기본적으로 Chart. js 를 사용 하여 응답 식 웹 페이지 를 만 들 수도 있 습 니 다.
Chart. js 라 이브 러 리 는 사용자 가 시각 화 된 데 이 터 를 신속하게 만 들 수 있 도록 합 니 다.Chart. js 는 설정 하기 쉽 고 초보 자 에 게 매우 친절 합 니 다.Chart. js 를 사용 하면 브 라 우 저의 호환성 문 제 를 고려 할 필요 가 없습니다. Chart. js 는 오래된 브 라 우 저 를 지원 하기 때 문 입 니 다.
npm 로 Chart. js 설치:
npm install chart.js --save
Chart. js 레이더 그림 을 그 리 는 코드 예제:
const ctx = document.getElementById("myChart");
const options = {
scale: { // Hides the scale }
};
const data = {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [
{
data: [-10, -5, -3, -15],
label: "two",
borderColor: '#ffc63b'
},
{
data: [10, 5, 3, 10],
label: "three",
borderColor: '#1d9a58'
},
{
data: [18, 10, 4, 2],
label: "one",
borderColor: '#d8463c'
},
]
}
const myRadarChart = new Chart(ctx, {
data: data,
type: 'radar',
options: options
});Chartist
Chartist 라 이브 러 리 는 아름 답 고 호응 능력 이 강 하 며 우호 적 인 도 표를 읽 는 데 적합 하 다.Chartist 는 SVG 를 사용 하여 도 표를 보 여 줍 니 다.
Chartist 는 도표 정의 에서 CSS 미디어 조회 와 창의 애니메이션 을 사용 하 는 능력 도 제공 했다.사용 자 는 Chartist 를 사용 하여 도표 디자인 에서 자신의 모든 아 이 디 어 를 실현 한다.
Chartist 는 설정 하기 쉽 고 Sass 를 사용 하여 맞 춤 형 제작 하기 도 쉽다.그러나 오래된 브 라 우 저 는 지원 되 지 않 습 니 다.
Chartist 를 사용 하면 CSS 스타일 로 SVG 를 미화 할 수 있 습 니 다. 사용 자 는 자신 이 생각 하 는 모든 도표 스타일 을 현실 화 할 수 있 습 니 다.
npm 로 Chartist 설치:
npm install chartist --save
Chartist 는 사용자 정의 탭 이 있 는 떡 그림 을 만 드 는 코드 예제 입 니 다.
var data = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};var options = {
labelInterpolationFnc: function(value) { return value[0]
}
};var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 30,
labelOffset: 130,
labelDirection: 'explode',
labelInterpolationFnc: function(value) { return value;
}
}],
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]
];new Chartist.Pie('.ct-chart', data, options, responsiveOptions);FlexChart
FlexChart 는 고성능 의 도표 도구 입 니 다.FlexChart 를 사용 하면 표 데 이 터 를 업무 도표 로 쉽게 시각 화 할 수 있 습 니 다.FlexChart 는 접 는 선도, 떡 모양 도, 면적 도 등 흔히 볼 수 있 는 도표 유형 을 지원 할 뿐만 아니 라 기포 도, K 선도, 막대 그래프, 깔때기 도 등 고급 도표 유형 도 지원 한다.
FlexChart 의 사용 도 매우 간단 하 다. FlexChart 도 표 는 데이터 와 관련 된 모든 임 무 를 CollectionView 류 에 위탁 하고 CollectionView 류 만 조작 하면 여과, 정렬, 그룹 데이터 등 기능 을 실현 할 수 있다.
FlexChart 에 포 함 된 도표 요소 도 비교적 전면적 이다. 예 를 들 어 도표 사례, 도표 제목, 도표 꼬 릿 말, 축, 도표 series 와 라벨 등 이다. 사용자 도 도표 에 평균 선과 추세 선 등 사용자 정의 요 소 를 추가 할 수 있다.
FlexChart 는 본질 적 으로 상호작용 적 인 도표 로 데이터 가 어떠한 변경 을 하 든 도표 에 자동 으로 반응 한다. 예 를 들 어 도표 곡선 은 데이터 의 확대 와 축소, 여과, 다이 아, 애니메이션 등 이다.
플 렉 스 차 트 의 중국어 학습 안내서 와 욱 일 도 데 모 를 살 펴 본다.
FlexChart 에서 막대 그래프 를 그 리 는 코드 예제:
onload = function() { // wrap data in a CollectionView so the grid and chart
// get notifications
var data = new wijmo.collections.CollectionView(getData()); // create the chart
var theChart = new wijmo.chart.FlexChart('#theChart', {
itemsSource: data,
bindingX: 'country',
series: [
{ binding: 'sales', name: 'Sales' },
{ binding: 'expenses', name: 'Expenses' },
{ binding: 'downloads', name: 'Downloads' }
]
}) // create a grid to show the data
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: data
}) // create some random data
function getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = []; for (var i = 0; i
Echarts
Echarts 。 Echarts， 、 ， 。
Echarts JavaScript ， Echarts 。
，Echarts 。
npm Echarts ：
npm install echarts --save
Echarts ：
var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};
option = null;
option = {
title: {
text: 'Large-scale scatterplot'
},
tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
zlevel: 1
},
legend: {
data:['sin','cos']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
name:'sin',
type:'scatter',
large: true,
symbolSize: 3,
data: (function () { var d = []; var len = 10000; var x = 0; while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x, //Math.random() * 10
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
} //console.log(d)
return d;
})()
},
{
name:'cos',
type:'scatter',
large: true,
symbolSize: 2,
data: (function () { var d = []; var len = 20000; var x = 0; while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x, //Math.random() * 10
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
} //console.log(d)
return d;
})()
}
]
};
;if (option && typeof option === "object") {
myChart.setOption(option, true);
}
NVD3
NVD 3 는 마이크 보스 톡 이 작성 한 D3 기반 자 바스 크 립 트 라 이브 러 리 다.NVD 3 는 사용자 가 웹 프로그램 에서 아름 답 고 재 활용 가능 한 도 표를 만 들 수 있 도록 합 니 다.
NVD 3 는 상자 형 그림, 욱 일 형, 촛대 그림 등 을 편리 하 게 만 들 수 있 는 강력 한 도표 기능 을 가지 고 있다.만약 사용자 가 JavaScript 도표 라 이브 러 리 에서 대량의 능력 을 사용 하고 싶다 면, NVD 3 를 사용 해 보 는 것 을 추천 합 니 다.
NVD 3 도표 라 이브 러 리 의 속 도 는 때때로 문제 가 될 수 있 습 니 다. Fastdom 설치 와 배합 하여 사용 하면 속도 가 더욱 빨 라 질 것 이다.
NVD 3 간단 한 접선 코드 예제 그리 기: /*These lines are all chart setup. Pick and choose which chart features you want to utilize. */nv.addGraph(function() { var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis ;
chart.xAxis //Chart x-axis settings
.axisLabel('Time (ms)')
.tickFormat(d3.format(',r'));
chart.yAxis //Chart y-axis settings
.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f')); /* Done setting the chart up? Time to render it!*/
var myData = sinAndCos(); //You need data...
d3.select('#chart svg') //Select the
C3.js
TauCharts ，C3.js D3 。 ，C3.js 。
C3.js ， C3.js ， 。
C3.js ， ， 。C3.js Web ， 。
npm C3.js ：
npm install c3
C3.js ：
var chart = c3.generate({
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150],
['data6', 90, 70, 20, 50, 60, 120],
],
type: 'bar',
types: {
data3: 'spline',
data4: 'line',
data6: 'area',
},
groups: [
['data1','data2']
]
}
});
TauCharts
TauCharts 는 가장 유연 한 JavaScript 도표 라 이브 러 리 중의 하나 이다.D3 를 기반 으로 만 들 어 졌 으 며 데이터 중심의 자바 스 크 립 트 도표 라 이브 러 리 로 데이터 시각 화 효 과 를 개선 할 수 있 습 니 다.
TauCharts 는 매우 유연 하고 API 에 접근 하 는 것 도 매우 쉽다.TauCharts 는 사용자 에 게 틈새 없 는 맵 과 시각 화 된 데 이 터 를 제공 하고 TauCharts 를 사용 하면 매우 아름 다운 데이터 인터페이스 를 디자인 할 수 있 습 니 다.동시에 TauCharts 도 배우 기 쉽다.
npm 를 통 해 TauCharts 설치:
npm install taucharts
TauCharts 가 수평선 을 그 리 는 코드 예제: var defData = [
{"team": "d", "cycleTime": 1, "effort": 1, "count": 1, "priority": "low"}, { "team": "d", "cycleTime": 2, "effort": 2, "count": 5, "priority": "low"
}, {"team": "d", "cycleTime": 3, "effort": 3, "count": 8, "priority": "medium"}, { "team": "d", "cycleTime": 4, "effort": 4, "count": 3, "priority": "high"
}, {"team": "l", "cycleTime": 2, "effort": 1, "count": 1, "priority": "low"}, { "team": "l", "cycleTime": 3, "effort": 2, "count": 5, "priority": "low"
}, {"team": "l", "cycleTime": 4, "effort": 3, "count": 8, "priority": "medium"}, { "team": "l", "cycleTime": 5, "effort": 4, "count": 3, "priority": "high"
},
{"team": "k", "cycleTime": 2, "effort": 4, "count": 1, "priority": "low"}, { "team": "k", "cycleTime": 3, "effort": 5, "count": 5, "priority": "low"
}, {"team": "k", "cycleTime": 4, "effort": 6, "count": 8, "priority": "medium"}, { "team": "k", "cycleTime": 5, "effort": 8, "count": 3, "priority": "high"
}];var chart = new tauCharts.Chart({
data: defData,
type: 'horizontalBar',
x: 'effort',
y: 'team',
color:'priority'
});
chart.renderTo('#bar');
Recharts
ReCharts 는 React 를 사용 하여 구 축 된 D3 기반 도표 라 이브 러 리 입 니 다.
ReCharts 를 사용 하면 사용 자 는 React 웹 프로그램 에서 빈 틈 없 이 도 표를 작성 할 수 있 습 니 다.
Recharts 는 매우 가 볍 고 SVG 요 소 를 사용 하여 특이 한 도 표를 만 듭 니 다.
npm 로 Recharts 설치:
npm install recharts
Recharts 는 지루 한 문서 가 없습니다. 아주 직접적 입 니 다.어려움 을 겪 었 을 때 Recharts 를 사용 하면 해결 방안 을 쉽게 찾 을 수 있 습 니 다.
Recharts 에서 사용자 정의 콘 텐 츠 트 리 그림 을 만 드 는 코드 예제:const {Treemap} = Recharts;
const data = [
{
name: 'axis',
children: [
{ name: 'Axes', size: 1302 },
{ name: 'Axis', size: 24593 },
{ name: 'AxisGridLine', size: 652 },
{ name: 'AxisLabel', size: 636 },
{ name: 'CartesianAxes', size: 6703 },
],
},
{
name: 'controls',
children: [
{ name: 'AnchorControl', size: 2138 },
{ name: 'ClickControl', size: 3824 },
{ name: 'Control', size: 1353 },
{ name: 'ControlList', size: 4665 },
{ name: 'DragControl', size: 2649 },
{ name: 'ExpandControl', size: 2832 },
{ name: 'HoverControl', size: 4896 },
{ name: 'IControl', size: 763 },
{ name: 'PanZoomControl', size: 5222 },
{ name: 'SelectionControl', size: 7862 },
{ name: 'TooltipControl', size: 8435 },
],
},
{
name: 'data',
children: [
{ name: 'Data', size: 20544 },
{ name: 'DataList', size: 19788 },
{ name: 'DataSprite', size: 10349 },
{ name: 'EdgeSprite', size: 3301 },
{ name: 'NodeSprite', size: 19382 },
{
name: 'render',
children: [
{ name: 'ArrowType', size: 698 },
{ name: 'EdgeRenderer', size: 5569 },
{ name: 'IRenderer', size: 353 },
{ name: 'ShapeRenderer', size: 2247 },
],
},
{ name: 'ScaleBinding', size: 11275 },
{ name: 'Tree', size: 7147 },
{ name: 'TreeBuilder', size: 9930 },
],
},
{
name: 'layout',
children: [
{ name: 'AxisLayout', size: 6725 },
{ name: 'BundledEdgeRouter', size: 3727 },
{ name: 'CircleLayout', size: 9317 },
{ name: 'CirclePackingLayout', size: 12003 },
{ name: 'DendrogramLayout', size: 4853 },
{ name: 'ForceDirectedLayout', size: 8411 },
{ name: 'IcicleTreeLayout', size: 4864 },
{ name: 'IndentedTreeLayout', size: 3174 },
{ name: 'Layout', size: 7881 },
{ name: 'NodeLinkTreeLayout', size: 12870 },
{ name: 'PieLayout', size: 2728 },
{ name: 'RadialTreeLayout', size: 12348 },
{ name: 'RandomLayout', size: 870 },
{ name: 'StackedAreaLayout', size: 9121 },
{ name: 'TreeMapLayout', size: 9191 },
],
},
{ name: 'Operator', size: 2490 },
{ name: 'OperatorList', size: 5248 },
{ name: 'OperatorSequence', size: 4190 },
{ name: 'OperatorSwitch', size: 2581 },
{ name: 'SortOperator', size: 2023 },
],
}
];
const COLORS = ['#8889DD', '#9597E4', '#8DC77B', '#A5D297', '#E2CF45', '#F8C12D'];
const CustomizedContent = React.createClass({
render() {
const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props; return (
{
depth === 1 ?
{name}
: null
}
{
depth === 1 ?
{index + 1}
: null
} );
}
});
const SimpleTreemap = React.createClass({
render () { return ( }
/> );
}
})
ReactDOM.render( ,
document.getElementById('container')
);
Flot
현재 jQuery 는 웹 개발 자 들 에 게 매우 중요 한 도구 가 되 었 다.Flot. js 가 있어 프론트 디자인 도 쉬 워 졌 습 니 다.
Flot. js 는 JavaScript 라 이브 러 리 에서 비교적 오래된 도표 라 이브 러 리 중의 하나 이다.그럼 에 도 불구 하고 Flot. js 는 접선 도, 떡 그림, 막대 그래프, 면적 도, 심지어 중첩 도 표를 그 렸 다 고 해서 성능 을 떨 어 뜨리 지 는 않 을 것 이다.
Flot. js 는 완벽 한 문 서 를 가지 고 있 습 니 다.사용자 가 어려움 을 만 났 을 때 쉽게 해결 방법 을 찾 을 수 있다.Flot. js 도 이전 버 전의 브 라 우 저 를 지원 합 니 다.
npm 를 사용 하지 않 고 Flot. js 를 설치 할 수 있 으 며, HTML 5 에 jQuery 와 JavaScript 파일 을 포함 할 수 있 습 니 다.
Flot. js 의 기본 용법 코드 예시: $(function () { var d1 = []; for (var i = 0; i
JavaScript
SpreadJS HTML5 JavaScript ， 、 、 、 、 、Excel / ， .NET、Java Excel 。
JavaScript 。 ， ， 。 JavaScript 。
：https://dzone.com/articles/top-9-javascript-charting-libraries
：
1980 ， ， 、 ， 75% 500 。 1988 ， ， ， 。
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
