필요한 파일을 도입 1.html 페이지
<! - ChartJS ->
<스크립트 일 : SRC = "@ {/ bower_components / chart.js / Chart.js}"> </ script>
<! - AdminLTE 대시 보드 데모 (이것은 단지입니다 위해 데모 목적) ->
<스크립트 일 : SRC = "@ {/ bower_components / DIST / JS / 페이지 / dashboard2.js}"> </ script>
<스크립트 SRC = "./ JS / echarts.min.js"> </ script>
2. 캔버스 페이지
1 < DIV 클래스 = "차트" >
2 <! - 판매 캔버스 차트 ->
3 < 캔버스 ID = "salesChart" 스타일 = "높이 : 180px;" > </ 캔버스 >
4 </ DIV >
코드 dashboard.js를 다시 작성합니다
1 $ ( 함수 () {
2 / * ChartJS
3 * -------
4 * 다음은 ChartJS하여 몇 차트 작성한다
(5) * /
6
7 // ------------ -----------
8 // - 월별 판매 차트 -
9 // -----------------------
(10)
(11) // 가져 오기 . jQuery로 컨텍스트 - jQuery의 갔지 () 메소드를 사용하여
12 VAR salesChartCanvas = $ ( '# salesChart') 수 (0) .getContext ( '2D'. )
(13) // 이 JQuery와 컬렉션의 첫 번째 반환 된 노드를 얻을 것이다 .
(14) VAR salesChart = 새로운 새로운 차트 (salesChartCanvas)
(15)
(16) VAR salesChartData = {
. 17 개 레이블 : 「January」, 「February」등, "월", "4월 ','5 ','6월 ' 7월 ","8월 ","9월 "월 '10, ''11 개월', '12 개월 ' ]
(18)는 데이터 세트 : [
19. {
(20)는 라벨 :'디지털 제품 ' ,
(21)는 하고 fillColor :'# e2f9e3 ' ,
22은 '# 12BA1D :은, strokeColor 인 ' ,
23은 pointColor'#fff ' ,
24 pointStrokeColor : '# 12BA1D' ,
25 pointHighlightFill '#fff' ,
26 pointHighlightStroke '# 12BA1D' ,
27 개 데이터 [28, 48, 40, 19, 86, 27, 90, 48, 40, 19, 86, 78 ]
28 }
29 ]
30 };
(31) var에 salesChartOptions = {
32 // 부울 - 우리 모두의 규모를 표시해야하는 경우
33 showScale : 사실 ,
34 // 부울 - 여부의 눈금 선이 차트를 통해 표시됩니다
35 scaleShowGridLines : 사실 ,
(36) //문자열 - 그리드 라인의 색상每行X轴的线
37 scaleGridLineColor '#fafafa' ,
38 // 수 - 그리드 라인의 폭
39 scaleGridLineWidth : 1 ,
40 // 부울 - 여부 수평선을 보여 (제외 X 축 )
41 scaleShowHorizontalLines : 사실 ,
42 // 부울 - 여부 Y 축 제외 수직선 (보여)
43 scaleShowVerticalLines : 거짓 ,
44 // 取消曲线用折线
45 베지에 곡선 : 거짓 ,
46 //- 숫자 점 사이의 베 지어 곡선의 인장
47 bezierCurveTension : 0.3 ,
48 // - 있을지 어떨지는 각 포인트에 대한 도트를 표시하는
49 pointDot : 사실 ,
50 // 수 - 픽셀의 각 점 도트의 반경
51 pointDotRadius : 2 ,
52 // 번호 - 픽셀 포인트 도트 선 폭
53 pointDotStrokeWidth : 1 ,
54 // 수 - 여분의 그린 점 밖에 히트 감지 맞추 반경 추가 량
55 pointHitDetectionRadius 20 ,
56 // 부울 - 여부는 데이터 세트에 대한 선을 보여
57 datasetStroke : 사실 ,
58 //를 수 - 셋 스트로크 픽셀 너비
59 datasetStrokeWidth : 2 ,
60 // 부울 - 여부가 색 데이터 세트를 채우기 위해
61 datasetFill : 사실 ,
62 // 문자열 - 범례 서식
63 legendTemplate '<UL 등급 = \'<% = name.toLowerCase () %> - 범례 \ '> <% (VAR 내가 = 0; I <datasets.length 단계; I ++) 미국 {%> <LI> <스팬 스타일 = \ '배경색 <셋 % = [I] .lineColor %> \'> </ SPAN> <% = 셋 [I].%> </ 리> <%} %> </ UL> '레이블,
64 // 부울 - 시작 화면 비율을 유지할지 여부를 때 반응 false로 세트, 전체 컨테이너 소요됩니다 경우
65 비 유지 : 사실을 ,
66 // 부울 - 크기 조절 창에 반응 차트를 만들기 위해 여부를
67 반응 : 사실
68 };
(69)
(70) //하는 선 차트 작성
71 salesChart.Line (salesChartData, salesChartOptions)를;