jQuery jqPlot 플러그인을 사용하여 histogram_jquery 그리기

프로젝트 개발 과정에서 계좌의 자금 상태를 표시해야 합니다. 고객에게 좋은 경험을 제공하기 위해 그리기 과정을 원래의 생태 스크립트를 사용하여 표시합니다. , 더 번거롭고 시간이 많이 걸릴 것이므로 우리는 많은 시간을 절약하고 사용자에게 빠르게 표시할 수 있는 그리기용 jqPlot 플러그인을 선택했습니다.

플러그인 공식 주소 : http://www.jqplot.com/

구체적인 구현은 다음과 같습니다.

JS 파일 인용:

코드 복사 코드는 다음과 같습니다.

HTML 코드

코드 복사 코드는 다음과 같습니다.

자바스크립트:

코드 복사 코드는 다음과 같습니다.

 var ChartBar = 함수 () {
         var 데이터={param1:param1,param2:param2};//传递参数
         $("#chart1").html("");//绘图DIV
         var s1;
         $.ajax({
             유형: "POST",
             URL: '../Home/AccountSum',
             데이터: 데이터,
             데이터 유형: "json",
             비동기: 거짓,
             성공: 함수 (d) {
                 if (d.flag) {
                     s1 = [parseFloat(d.data.Total1),parseFloat(d.data.Total2),parseFloat(d.data.Total3),parseFloat(d.data.Total4),parseFloat(d.data.Total5),parseFloat( d.data.Total6)];
                 } 그 밖의 {
                     s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];
                 }
                 $.jqplot.config.enablePlugins = true;
                 var 진드기 = ['充值', '提款', '应收', '销售', '退票', '验证'];
                 varplot1 = $.jqplot('chart1', [s1], {
                     // excanvas를 사용하지 않는 경우에만 애니메이션을 적용합니다(IE 7 또는 IE 8에서는 제외)..
                     //애니메이션: !$.jqplot.use_excanvas,
                     시리즈기본값: {
                         pointLabels: { 표시: true },
                         그림자: 거짓,
                         showMarker: true, // 是否强调显示图中的数据节点
                         렌더러: $.jqplot.BarRenderer,
                         렌더러 옵션: {
                             바너비: 50,
                             바마진: 50
                         }
                     },
                     축: {
                         x축: {
                             표시: true,    //是否自动显示坐标轴
렌더러: $.jqplot.CategoryAxisRenderer,
~             ShowTicks: true, // 좌표축에 눈금 표시 및 눈금 값 표시 여부
showTickMarks: true, //틱 표시 여부 설정
>                                      아웃 아웃     쇼: 사실,
>                       글꼴 계열: 'tahoma,arial,"Hiragino Sans GB",宋体b8b体,sans-serif',
showLabel: true, //좌표축에 눈금 및 스케일 값을 표시할지 여부
showMark: false, //눈금 표시 여부 설정
ShowGridline: false // 차트 영역에 스케일 값 방향으로 그리드를 표시할지 여부
~ ~                                  Y축: {
쇼: 사실,
ShowTicks: false, // 좌표축에 눈금 표시 및 눈금 값 표시 여부
showTickMarks: false, //틱 표시 여부 설정
자동 크기 조정: true,
국경 너비: 1,
>                  10개 중 out out out 옵션: {
쇼: 사실,
showLabel: 거짓,
showMark: 거짓,
showGridline: 사실,
formatString: '\%.2f'
~ ~                                 },
그리드: {
drawGridLines: true,
                        drawBorder: false,
                      그림자: 거짓,
~                                        borderColor: '#000000',         // 차트의 (가장 바깥쪽) 테두리 색상을 설정합니다.
BorderWidth: 1 // 그래프(바깥쪽) 테두리 너비 설정
                     },
                     형광펜: { 표시: false }
                 });
             },
             오류: 함수 () {
warning("그래픽 통계를 얻지 못했습니다!");
            }
          });
};


렌더링:

오늘은 여기까지입니다. 공식 예제를 미리 살펴본 결과 이 ​​기능이 매우 강력하고 매우 편리하며 사용하기 쉽다는 것을 알았습니다. 하지만 사용 과정에서 일부 문제점도 발견돼 부분적인 구현이 만족스럽지 못할 수도 있다.