Question

我正在尝试绘制折线图，但不知道如何使用jquery在LineChart中传递动态数据库值？

我已经搜索过，但无法在堆栈中找到答案。

我正在通过两个领域： 1）日期时间（Y轴） 2）该日期没有下载（X轴）

是否有任何机构在其网站上使用此类设施？我应该使用哪个插件？

这是html

<section class="panel corner-flip">
<header class="panel-heading no-borders">
  <h2><strong>LINE</strong> Chart </h2>
  <label class="color">Plugin <strong> Flot chart in table</strong></label>
</header>
<div class="widget-chart chart-dark">
  <table class="flot-chart" data-type="lines" data-tool-tip="show" data-width="100%" data-height="220px">
     <thead>
        <tr>
           <th></th>
           <th style="color : #3db9af;">Page View</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th>JAN</th>
           <td>295</td>
        </tr>
        <tr>
           <th>FEB</th>
           <td>3145</td>
        </tr>
        <tr>
           <th>MAR</th>
           <td>1515</td>
        </tr>
        <tr>
           <th>APR</th>
           <td>4578</td>
        </tr>
        <tr>
           <th>MAY</th>
           <td>4041</td>
        </tr>
        <tr>
           <th>JUN</th>
           <td>12090</td>
        </tr>
        <tr>
           <th>JUL</th>
           <td>4235</td>
        </tr>
        <tr>
           <th>AUG</th>
           <td>1215</td>
        </tr>
        <tr>
           <th>SEP</th>
           <td>2315</td>
        </tr>
        <tr>
           <th>OCT</th>
           <td>5315</td>
        </tr>
        <tr>
           <th>NOV</th>
           <td>2015</td>
        </tr>
        <tr>
           <th>DEC</th>
           <td>315</td>
        </tr>
     </tbody>
  </table>

这是js文件......

var     bars = false,
lines = true,
pie=false;
var     createFlot=function($chageType , $change){ 
var el=$("table"+($change ? $change:".flot-chart"));
el.each(function() {      
    var colors = [], data = $(this).data(),
    gridColor=data.tickColor || "rgba(0,0,0,0.2)";
    $(this).find("thead th:not(:first)").each(function() {
             colors.push($(this).css("color"));
    });
    if($chageType){
        bars = $chageType.indexOf("bars") != -1;
        lines = $chageType.indexOf("lines") != -1;
        pie = $chageType.indexOf("pie") != -1;
        $(this).next(".chart_flot").hide();
    }else{
        if(data.type){
            bars = data.type.indexOf("bars") != -1;
            lines = data.type.indexOf("lines") != -1;
            pie = data.type.indexOf("pie") != -1;
        }
    }
$(this).graphTable({ series: 'columns', position: data.position || 'after',  width: data.width, height: data.height, colors: colors },
 {
    series: { stack: data.stack ,    pie: { show: pie , innerRadius: data.innerRadius || 0,  stroke: {  shadow: data.pieStyle=="shadow" ? true:false } , label:{ show:data.pieLabel } }, bars: { show: bars , barWidth: data.barWidth || 0.5, fill: data.fill || 1, align: "center"  } ,lines: { show: lines  , fill:0.1 , steps: data.steps } },
    xaxis: { mode:  data.mode || "categories", tickLength: 0 },
    yaxis: { tickColor: gridColor ,max:data.yaxisMax,
    tickFormatter: function number(x) {  var num; if (x >= 1000) { num=(x/1000)+"k"; }else{ num=x; } return num; }
                                    },  
    grid: { borderWidth: {top: 0, right: 0, bottom: 1, left: 1},color : gridColor },
    tooltip: data.toolTip=="show" ? true:false  ,
    tooltipOpts: { content: (pie ? "%p.0%, %s":"<b>%s</b> :  %y")  }
                            });
                    });
        }
        // Create Flot Chart
        createFlot();

        $(".chart-change a").click(function (e) {
                var el=$(this),data=el.data();
                el.closest(".chart-change").find("a").toggleClass("active");
                el.closest(".chart-change").find("li").toggleClass("active");
                createFlot(data.changeType,data.forId);
        });

        $(".label-flot-custom").each(function () {
            var el=$(this), data=el.data() ,colors = [] ,lable=[] , li="";
                $(data.flotId).find("thead th:not(:first)").each(function() {
                              colors.push($(this).css("color"));
                              lable.push($(this).text());
                });         
                for(var i=0;i<lable.length;i++){
                    li += '<li><span style="background-color:'+ colors[i] +'"></span>'+ lable[i] +" ( "+$(data.flotId).find("tbody td").eq(i).text()+' ) </li> ';
                }
                el.append("<ul>"+li+"</ul>");
                if($(data.flotId).prev(".label-flot-custom-title")){
                    var height=$(data.flotId).next(".chart_flot").css("height");
                    $(data.flotId).prev(".label-flot-custom-title").css({"height":height, "line-height":height });
                }
        });

Answer 1

尝试此示例，这将有助于您解决问题。

此处是此示例的链接：line charts example

您可以使用以下语法更改x轴上的标签：

labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

只是尝试在php中改变这个

    labels: [
     <?php foreach($month as $value){
       echo '"'.$value.'"'; 
      }
     ?>]

使用数据库值动态绘制折线图

1 个答案: