2016-04-27 9 views
0

チャートは次のとおりです。jqplotエリアは、私がjqplotとコードで働いています

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pieRenderer.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" /> 

    <title>Chart 5</title> 
</head> 

<body> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     var l1 = [78, 75, 77, 78, 80, 83, 90, 96, 99, 82]; 
     var l2 = [4, 8, 5, 3, 6]; 
     var l3 = [12, 6, 13, 11, 2]; 

     var plot1 = $.jqplot('chart1b', [l1], { 
     stackSeries: true, 

     showMarker: true, 

     seriesDefaults: { 
      fill: true, 
      pointLabels: { 
      show: true 
      } 
     }, 

     axes: { 
      xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: ['12 AM \n 3/13', '8 AM', '4 PM', '12 AM \n 3/14', '8 AM', '4 PM', '12 AM \n 3/15', '8 AM', '4 PM', '12 AM \n 3/16'] 
      }, 

      /*yaxis: { 
      min: 0, 
      max: 100 
      }*/ 
      yaxis: { 
      tickInterval: 25, 
      showTicks: true, 
      showTickMarks: true, 
      ticks: [0, 25, 50, 75, 100] 
      } 
     }, 

     highlighter: { 
      show: true, 
      showTooltip: true 
     } 
     }); 
    }); 
    </script> 
    <h2>Area Chart</h2> 
    <div style="width: 500px; height: 300px;" id='chart1b'></div> 
</body> 
</html> 

ではなく、すべてのデータポイントを強調し、私は唯一の最小値と最大値のデータポイントを強調表示することにしたいです。それを行う方法はありますか?いいえ、提案してください。

+0

あなたは青い線を3/13の午前12時と3/16の午前12時に描画したいと思いますか?簡単に説明してください。 –

答えて

0

私は正確にあなたが望むものを得ていないので、私はあなたのチャートにいくつかの変更を加えましたので、いくつかの分析の基礎をjsfiddleで作成しました。ここからそれを得る、

+0

私は何をしたいですか------任意のデータポイントにマウスを置くと、そのポイントがハイライト表示され、特定のポイントでデータを表示するツールチップが表示されます。 すべてのデータポイントではなく、最小値と最大値のみを強調表示する必要があります。私は今はっきりしていることを祈っています。 –

+0

私は画像のようなものを実現しようとしています------ http://imgur.com/USMqpmk –

+0

何私は考えることができる、もし私がグラフの中で最も低いピクセルポイントを決定すれば、キャンバスを使ってそれらのピクセルに円を描くことができます(jqplotはそれを使います)。しかし、私はどのようにグラフの最低と最高のピクセルポイントを把握するかわからない、ポインタは本当に役立つだろう –