फ्लोट ग्राफ़ में x और y अक्ष के लिए शीर्षक

फ़्लोट ग्राफ़ में एक्स और वाई अक्ष के लिए शीर्षक दिखाना संभव है?फ्लोट ग्राफ़ में x और y अक्ष के लिए शीर्षक

के बाद कोड है:

$.plot($("#placeholder_1w"), [d], { 
     series: { 
     lines: { show: true, fill: false, fillColor: "red" }, 
     points: { show: true, fill: true,fillColor: "red" } 
    }, 
     grid: { hoverable: true, clickable: true , color: 'green'}, 
     xaxis: { 
      mode: "time", 
      minTickSize: [1, "day"], 
      min: (myWeekDate).getTime(), 
      max: (new Date()).getTime() 
     }, 
     colors: ["red", "green", "#919733"] 
    });

स्रोत

2012-12-11 user1871640

@ रैली के उत्तर के अलावा, एक प्लगइन भी उपलब्ध है: https://github.com/markrcote/flot-axislabels – Mark

@ मार्क - इसे एक उत्तर दें, मैं इसके लिए वोट दूंगा :) – Ryley

Flot अपने आप में अक्ष लेबल का समर्थन नहीं करता है, लेकिन आप काफी आसानी से HTML और सीएसएस, और अपने flot के विकल्प के लिए संशोधन का एक सा का उपयोग कर उन्हें जोड़ सकते हैं।

flot site पर डेमो एक वाई अक्ष लेबल है। यह flot कंटेनर के लिए कुछ वर्गों के साथ एक div जोड़कर बनाई गई है: तो फिर

var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>") 
    .text("My X Label") 
    .appendTo($('#placeholder_1w')); 

var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>") 
    .text("Response Time (ms)") 
    .appendTo($('#placeholder_1w'));

, तो आप इस तरह सीएसएस की जरूरत है:

.axisLabel { 
    position: absolute; 
    text-align: center; 
    font-size: 12px; 
} 

.xaxisLabel { 
    bottom: 3px; 
    left: 0; 
    right: 0; 
} 

.yaxisLabel { 
    top: 50%; 
    left: 2px; 
    transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
}

आप IE6/7 का समर्थन की जरूरत है, वहाँ के लिए और अधिक प्रवंचना है दुर्भाग्य से निपटने - आप चाहते हैं कि आपके द्वारा शरीर टैग इस तरह कुछ कर रही द्वारा "IE6" या "IE7" के वर्ग के साथ लेबल किया जाना चाहिए:

<!--[if IE 6]><body class="ie ie6"><![endif]--> 
<!--[if IE 7]><body class="ie ie7"><![endif]--> 
<!--[if IE 8]><body class="ie ie8"><![endif]--> 
<!--[if IE 9]><body class="ie ie9"><![endif]--> 
<!--[if gt IE 9]><body class="ie"><![endif]--> 
<!--[if !IE ]><!--><body><!--<![endif]-->

और फिर इस अतिरिक्त सीएसएस:

.ie7 .yaxisLabel, .ie8 .yaxisLabel { 
    top: 40%; 
    font-size: 36px; 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand'); 
}

आखिरकार, ऐसा करने के मेरे प्रयासों में, मैंने पाया कि मुझे वाई अक्ष के लिए एक निश्चित लेबलविड्थ निर्दिष्ट करने और xaxis के लिए एक निश्चित लेबल हाइट निर्दिष्ट करने की आवश्यकता है। http://jsfiddle.net/ryleyb/U82Dc/

स्रोत

2012-12-11 17:18:05 Ryley

यहाँ flot बाहर के लिए एक प्लगइन है: https://github.com/mikeslim7/flot-axislabels अक्ष लेबल लागू करने के लिए

एक काम उदाहरण देखें।

हालांकि यह संस्करण 9.0 से कम IE ब्राउज़र में समर्थित नहीं है। @ रैली का समाधान एक अच्छा है।

स्रोत

2013-01-08 09:46:21 Bimal

यह प्लगइन अधिक हालिया है: https://github.com/markrcote/flot-axislabels – cederlof

धन्यवाद @cederlof आपने अपना दिन बिमल बचाया है यह प्लगइन पुराना है और github.com/markrcote/flot-axislabels का उपयोग कर मेरे मुद्दे को हल करने में कुछ समस्याएं हैं –

फ्लोट ग्राफ़ में x और y अक्ष के लिए शीर्षक

उत्तर

संबंधित मुद्दे