jqplot面积图

时间:2016-04-27 12:51:16

标签: javascript jquery html 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>

我希望只突出显示最小和最大数据点,而不是突出显示所有数据点。有没有办法做到与否,请建议..

1 个答案:

答案 0 :(得分:0)

我在你的图表中做了一些更改,因为我没有得到你想要的东西,所以我在jsfiddle创建了一个分析的基础,你可以从这里得到它,

jsfiddle.net/fhdd8/358/