Jqplot Chart Plugin instructions for use (ii)

Histogram in the Jqplot diagram plug-in instructions (a), we have been able to draw a relatively simple line graph through Jqplot. By looking at the source code, we can also see that the line chart is the Jqplot default chart type:

/** * Class:series * An individual data Series object.  Cannot is instantiated directly, but created * by the Plot oject.  Series properties can is set or overriden by the  * options passed on from the user. */function Series (options) {    / / ... Other settings    //Prop:renderer    //A class of a renderer which would draw the series,     //See <$.jqplot. Linerenderer>.    This.renderer = $.jqplot. Linerenderer;    // ... Other Settings}

As can be seen from the source code above, Jqplot used the Renderer property when setting the chart type. This property sets a renderer for the data series of the chart, and the renderer determines how the data series of the chart is rendered. Therefore, for the simplest line graph, we only need to set the corresponding data series renderer, we can draw the simplest bar chart. The complete source code is as follows:

<! DOCTYPE html> 
Take a look:
 
The configuration histogram can be enriched by adding some settings to the simplest line chart. Similarly, the histogram can be configured in some way, and the configuration is almost no different from the linear graph. Let's look at one more example:
 
<! DOCTYPE html> 
The effect is as follows:
 
Other chart type charts are typically used to display statistical results to improve data readability. Charts can be divided into a variety of types, with different types showing the same effect. For example, the data of the line graph is shown in a curve, while the data of the histogram is displayed in multiple bars. There are different types of chart uses, and the line chart is obviously suitable for displaying the trend of the data, the histogram is suitable for comparing the data, and the pie chart is suitable for observing the ratio of different options, and so on. Through the study of linear and histogram, we can think of different types of graphs, and the biggest difference in Jqplot is the renderer. With different renderers, we can get a different display effect. Of course, there will be some different configurations between them, but we can all use the documentation or the source code to see how to configure a chart.
Here are some of the more commonly used chart types and sample code.
 
 
 
  

  
   
 
    
Pie-like chart. The data series renderer for the pie chart is $.jqplot. Pierenderer. Unlike a line chart or histogram, the data format of a pie chart is a three-dimensional array.
 
   
 
  
  
<!        DOCTYPE html> :  
 
   

  
    
 
     
Ring diagram. The difference between a doughnut chart and a pie chart is that the renderer differs only by changing the code associated with the pie-chart renderer to the renderer code corresponding to the doughnut chart, which transforms a pie chart into a doughnut chart. The doughnut-chart renderer is $.jqplot. Donutrenderer, here is the complete example code for the doughnut chart:
 
    
 
   
  
<!        DOCTYPE html> :  
 
    

  
     
 
      
Instrument panel. The data series of a dashboard has only one numeric value that indicates where the pointer is located. The renderer for the dashboard data series is located in the Jqplot.meterGaugeRenderer.min.js file and is $.jqplot. Metergaugerenderer. Look at the complete dashboard Chart code:
 
     
 
    
  
<!        DOCTYPE html> : 
 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Jqplot Chart Plugin instructions for use (ii)