jqPlot बार चार्ट

Question

के साथ समस्याएं होने पर मैं बार ग्राफ बनाने के लिए jqPlot का उपयोग कर रहा हूं, लेकिन मैं कुछ समस्याओं में भाग गया।

समस्या 1: ग्राफ पर पहले और आखिरी बार काट दिया जाता है। इसमें से केवल आधा

समस्या 2: मैं नहीं चाहता कि मेरा डेटा बिंदु पूरे एक्स-अक्ष को फैलाए। क्या डेटा पूरे एक्स-अक्ष का विस्तार नहीं कर रहा है?

पूर्व: यह अभी क्या है।

इस डेटा मैं इसे

var chartData = [["19-Jan-2012",2.61],["20-Jan-2012",5.00],["21-Jan-2012",6.00]] 

में गुजर रहा यह jQuery मैं उपयोग कर रहा हूँ है।

// Plot chart 
     function PlotChart(chartData, numberOfTicks) { 
      $.jqplot.config.enablePlugins = true; 
       var plot2 = $.jqplot('chart1', [chartData], { 
        title: 'Mouse Cursor Tracking', 
        seriesDefaults:{ 
         renderer: $.jqplot.BarRenderer, 
         rendererOptions: { 
          barPadding: 1, 
          barMargin: 15, 
          barDirection: 'vertical', 
          barWidth: 50 
         }, 
         pointLabels: { show: true } 
        }, 
        axes: { 
         xaxis: { 
          pad: 0,  // a factor multiplied by the data range on the axis to give the 
          numberTicks: numberOfTicks, 
          renderer: $.jqplot.DateAxisRenderer, // renderer to use to draw the axis, 
          tickOptions: { 
           formatString: '%b %#d' // format string to use with the axis tick formatter 
          } 
         }, 
         yaxis: { 
          tickOptions: { 
           formatString: '$%.2f' 
          } 
         } 
        }, 
        highlighter: { 
         sizeAdjust: 7.5 
        }, 
        cursor: { 
         show: true 
        } 
       }); 
      } 

Answer 1

कैसे आप अपने भूखंड देखना चाहते से, आप अगर आप DateAxisRenderer के बजाय एक CategoryAxisRenderer उपयोग भी कर अपने आप को मुसीबत का एक बहुत कुछ बचा सकते हैं। श्रेणीएक्सिस रेन्डरर एक वास्तविक समय श्रृंखला के विपरीत डेटा के समझदार समूह को प्रदर्शित करने में बहुत बेहतर है।

var axisDates = ["Jan 19", "Jan 20", "Jan 21"] 
var chartData = [2.61,5.00,6.00] 

     $.jqplot.config.enablePlugins = true; 
      var plot2 = $.jqplot('chart2', [chartData], { 
       title: 'Some Plot', 
       seriesDefaults:{ 
        renderer: $.jqplot.BarRenderer, 
        rendererOptions: { 
         barPadding: 1, 
         barMargin: 15, 
         barDirection: 'vertical', 
         barWidth: 50 
        }, 
        pointLabels: { show: true } 
       }, 
       axes: { 
        xaxis: {        
          renderer: $.jqplot.CategoryAxisRenderer, 
          ticks: axisDates 
        }, 
        yaxis: { 
         tickOptions: { 
          formatString: '$%.2f' 
         } 
        } 
       }, 
       highlighter: { 
        sizeAdjust: 7.5 
       }, 
       cursor: { 
        show: true 
       } 
      }); 

Answer 2

डेटएक्सिस रेन्डरर वास्तव में रेखा ग्राफ के लिए नहीं है, न कि बार ग्राफ। जब आप बार ग्राफ के साथ गठबंधन करते हैं, तो यह सही काम नहीं करता है। DateAxisRenderer का विचार/लक्ष्य दिनांक/समय में एक रैखिक/सटीक समय ग्राफ बनाना है। इस तरह, यदि आप डेट एंट्री चूक जाते हैं, तो यह अभी भी समय के साथ स्केल करने के लिए तैयार होगा। DateAxisRenderer पर उनके उदाहरण देखें: http://www.jqplot.com/tests/date-axes.php

आप जो उपयोग करना चाहते हैं वह श्रेणीAxisRenderer है। फिर आप अपना खुद का टिक लेबल रेंडरर ओवरराइड/बना सकते हैं और जाने के लिए अच्छा हो सकते हैं। आम तौर पर आप किसी आइटम को अतिरिक्त खाली आइटम नहीं जोड़ना चाहते हैं, खासकर यदि वे खाली हैं, हालांकि, यदि आप करते हैं, तो उन्हें अपने डेटा सरणी में शामिल करें। http://jsfiddle.net/fordlover49/JWhmQ/

नोट आपके द्वारा प्रबंधित संसाधन अनुभाग को देखने के लिए क्या आप संदर्भ के लिए (jQuery फ़ाइल के अलावा) की जरूरत फ़ाइलें सत्यापित करने के लिए चाहते हो सकता है:

यहाँ एक jsfiddle आप क्या चाहते हैं क्या कर रही है।

यहाँ जावास्क्रिप्ट मामले में jsfiddle अप में कार्य करता है:

$.jqplot.config.enablePlugins = true; 
var chartData = [["19-Jan-2012", 2.61], ["20-Jan-2012", 5.00], ["21-Jan-2012", 6.00]]; 

// add a custom tick formatter, so that you don't have to include the entire date renderer library. 
$.jqplot.DateTickFormatter = function(format, val) { 
    // for some reason, format isn't being passed through properly, so just going to hard code for purpose of this jsfiddle 
    val = (new Date(val)).getTime(); 
    format = '%b&nbsp%#d' 
    return $.jsDate.strftime(val, format); 
}; 

function PlotChart(chartData, extraDays) { 
    // if you want extra days, just append them to your chartData array. 
    if (typeof extraDays === "number") { 
     for (var i = 0; i < extraDays; i++) { 
      var actualDate = new Date(chartData[chartData.length - 1]); // convert last entry to actual date 
      var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 1); // create new increased date 
      chartData.push([newDate, 0]); 
     } 
    } 

    var plot2 = $.jqplot('chart1', [chartData], { 
     title: 'Mouse Cursor Tracking', 
     seriesDefaults: { 
      renderer: $.jqplot.BarRenderer, 
      rendererOptions: { 
       barPadding: 1, 
       barWidth: 50 
      }, 
      pointLabels: { 
       show: true 
      } 
     }, 
     axes: { 
      xaxis: { 
       pad: 1, 
       // a factor multiplied by the data range on the axis to give the    
       renderer: $.jqplot.CategoryAxisRenderer, 
       // renderer to use to draw the axis,  
       tickOptions: { 
        formatString: '%b %#d', 
        formatter: $.jqplot.DateTickFormatter 
       } 
      }, 
      yaxis: { 
       tickOptions: { 
        formatString: '$%.2f' 
       } 
      } 
     }, 
     highlighter: { 
      sizeAdjust: 7.5 
     }, 
     cursor: { 
      show: true 
     } 
    }); 
} 

PlotChart(chartData, 3); 

Answer 3

यहाँ एक सरल हैक है कि मैं एक मार्जिन को दिखाने के लिए प्रयोग किया जाता है।

मैं एक प्रारंभिक तिथि और समाप्ति तिथि बना देता हूं जो क्रमशः एक दिन पहले और सामग्री के एक दिन बाद दिखाना चाहता हूं।

उदाहरण के लिए अगर मैं जनवरी 2012

var startingDate = new Date(2012, 0, 0); //=> 31th Dec 2011 
var endingDate = new Date(2012, 1, 1); //=> 1st Feb 2012 

के महीने दिखाना चाहते हैं तो मैं अपने ही DateTickFormatter मैं कहाँ प्रिंटआउट नहीं होगा इन दो तिथियों की घोषणा।

xaxis : { 
     renderer:$.jqplot.DateAxisRenderer, 
     min:startingDate, 
     max:endingDate, 
     tickInterval:'1 day' 
}