2014-04-02 3 views
0

Есть ли способ отобразить всплывающую подсказку или пузырь в соответствии с изображением ниже, чтобы показать наивысшее значение в линейном графике? Он должен быть виден в любое время не только при переходе с помощью мыши.jQplot с подсказкой для пикового значения?

Поддерживает ли jQplot это? Если нет, есть ли другой графический librabry, который делает это?

Большое спасибо.

enter image description here

+0

почему этот меченый 'highcharts'? – Mark

ответ

1

С jqplot, это возможно с помощью pointLabels плагина:

JS:

$(document).ready(function(){ 
    var line1 = [[0,14,null],[1,32,null], [2,41,null], [3,44,'Hello World!'], [4,40,null], [5,47,null], [6,53,null], [7,67,null]]; // Only the 'Hello World' will have a label 
    var plot1 = $.jqplot('chart1', [line1], { 
     title: 'Chart with Point Labels', 
     seriesDefaults: { 
     showMarker:false, 
     pointLabels: { show:true } 
     } 
    }); 
}); 

CSS для пузырем (от here):

#chart1 .jqplot-point-label { 
    width: 100px; 
    height: 25px; 
    padding: 0px; 
    background: #CC857E; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    text-align: center; 
    padding-top: 10px; 
    margin-bottom: 8px; 
} 
.jqplot-point-label:after 
{ 
    content: ''; 
    position: absolute; 
    border-style: solid; 
    border-width: 15px 10px 0; 
    border-color: #CC857E transparent; 
    display: block; 
    width: 0; 
    z-index: 1; 
    bottom: -10px; 
    left: 40px; 
} 

Производит эту (fiddle here):

enter image description here

+0

фантастический. это то, что мне нужно! Большое спасибо! :) – medzi

+0

У меня есть новый вопрос, вы можете помочь? http://stackoverflow.com/questions/23365000/what-is-the-correct-data-format-fro-jqplot-bar-stacked-chart – medzi

0

В highstock вы можете использовать флаги как this

Других варианты используют средства визуализации для добавления пользовательских форм: http://api.highcharts.com/highstock#Renderer

Смежные вопросы