前台强大的图表(js)

http://www.jqplot.com/ 网址,自己下载下例子看一下就明白了。

  这个是我之前做的项目中的例子(仅是部分代码):

function publicMethod(){
            
             var plot1 = $.jqplot(chart, [currYear], {
                 seriesColors: ["rgb(23, 108, 238)"],
                 title: titles,
                  highlighter: {
                     show: true,
                     sizeAdjust: 1,
                     tooltipOffset: 9
                 },
                 grid: {
                     background: ‘rgba(57,57,57,0.0)‘,
                     drawBorder: false,
                     shadow: false,
                     gridLineColor: ‘#666666‘,
                     gridLineWidth: 1
                 },
                 legend: {
                     show: true,
                     placement: ‘outside‘
                 },
                 series: [
                     {
                         label: visits
                     }
                 ],
                 axes: {
                     xaxis: {
                         renderer: $.jqplot.DateAxisRenderer,
                          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                         tickOptions: {
                             formatString: "%b %e",
                             angle: -30,
                             textColor: ‘#333333‘
                         },
                         min: start_array,
                         max: end_array,
                         tickInterval: distance,
                          drawMajorGridlines: false
                     },
                 },
             });

               $(‘.jqplot-highlighter-tooltip‘).addClass(‘ui-corner-all‘);  
        }

返回的数据类型在上面链接中就有,有很多不同样式的图表。

 

前台强大的图表(js),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。