How to show a single marker in the jqplot graph

2020-08-05 10:14发布

问题:

Hi im using jqplot graph. I need to hide the Circular points that are currently displayed on the plot chart for each value in the array except the last point.

I use the following code to display the chart. I used "show marker : false" option, but it hides all circular in the graph. Please help me how to show only one circular point in the graph.

<div id="chart2"></div>

var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
var plot1 = $.jqplot('chart2', [line2], {

seriesDefaults: {
    showMarker: false
},

axes:{
    xaxis:{
      renderer:$.jqplot.DateAxisRenderer,
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
          angle: -90,
          formatString: '%m/%d/%Y'
      },
    }
  },
yaxis: {
     labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
    show: true
  },

  cursor: {
    show: false
  }
});

I want to achieve the below screen as my output. please help me how this could be done. Any help will be appreciated.

回答1:

There is no direct way of doing this using jqplot. but you can achieve this by making the following changes: jsFiddle link

$(document).ready(function(){
  var line2 = [['2012-10-02', 20],['2012-10-03', 45],['2012-10-04', 35],['2012-10-05', 32],['2012-10-06', 30],['2012-10-07', 25]];
    var line3 = [['2012-10-07', 25]]; 
var plot1 = $.jqplot('chart1', [line2, line3], {

    series: [
        {
            showMarker: false
         },
        {
            showMarker: true
         }
],

axes:{
    xaxis:{
      renderer:$.jqplot.CategoryAxisRenderer,
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
      tickRenderer: $.jqplot.CanvasAxisTickRenderer,
      tickOptions: {
          angle: -90,
          formatString: '%m/%d/%Y'
      },
    }
  },
yaxis: {
     labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
highlighter: {
    show: true
  },

  cursor: {
    show: false
  }
});

});