Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

In 2013, THIS was the first startup I joined in my life. It was not until I came here that I realized how hard it was to start a startup. The product was just in its infancy, and there were a lot of things to do. The control of labor costs may also be to reduce risks in the process of entrepreneurship, but we need to use only resources to create products, seize the market, and strive for a place in all gaps, so that our products can survive for a longer time, so that we can have better returns and returns.

Tourism industry will be more and more popular, so far there have been many enterprises have descended on the above, the Internet also appeared a lot of business platform, and we entered into the ranks, although our product also belong to the electricity, but we is to provide electric business platform solution to the scenic spot, believe that is the rise of a new model, we will occupy scenic spot market, At the same time, there will be more competitors. We will dominate the market with our speed, quality and service.

In the process of the platform product research and development, need to display the account funds situation, in order to give customers good experience we adopted columnar graphical display, the process of drawing if such a figure drawn using original script is more troublesome, time will be longer, so we chose the jqPlot plugin for drawing, so that you can save a lot of time, It can also be done quickly and made available to users.

The plugin is introduced

JqPlot is a plotting and charting plug-in for the jQuery Javascript framework. JqPlot can generate beautiful line charts, bar charts, pie charts, and more with many features.

Plugin official address: www.jqplot.com/

The development process

1. Reference JS and CSS files

<link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel="stylesheet" /> <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shCoreDefault.min.css" rel="stylesheet" /> <link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shThemejqPlot.min.css" rel="stylesheet" /> <script SRC = "~ / Scripts/asset/jquery - 1.10.2. Min. Js" > < / script > < script type = "text/javascript" src="~/Scripts/asset/jqplot/jquery.jqplot.min.js" class="include"></script> <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushXml.js"></script> <script type="text/javascript" src="~/Scripts/asset/jqplot/excanvas.min.js"></script> <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.barRenderer.min.js"></script> <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script> <script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.pointLabels.min.js"></script>Copy the code

2. The Html code

<div id="chart1" class="box"></div>
Copy the code

3. The Javascript script

var chartBar = function () { var data={param1:param1,param2:param2}; // Pass the argument $("#chart1").html(""); // draw DIV var s1; $.ajax({ type: "POST", url: '.. /Home/AccountSum', data: data, datatype: "json", async: false, success: function (d) { if (d.flag) { s1 = [parseFloat(d.data.Total1), parseFloat(d.data.Total2), parseFloat(d.data.Total3), parseFloat(d.data.Total4), parseFloat(d.data.Total5), parseFloat(d.data.Total6)]; } else {s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00]. } $.jqplot.config.enablePlugins = true; Var ticks = [' top-up ', 'money', 'accounts receivable' and 'sales',' refund ', 'validation']. var plot1 = $.jqplot('chart1', [s1], { // Only animate if we're not using excanvas (not in IE 7 or IE 8).. //animate: ! $.jqplot.use_excanvas, seriesDefaults: { pointLabels: { show: true }, shadow: false, showMarker: Renderer: $.jqplot.BarRenderer, rendererOptions: {barWidth: 50, barMargin: 50}}, axes: {xaxis: {show: true, / / is displayed automatically coordinate the renderer: $. Jqplot. CategoryAxisRenderer, ticks, ticks, showTicks: ShowTickMarks: true, // Sets whether to display scales tickOptions: {show: true, fontSize: '14px', fontFamily: 'Tahoma, Arial,"Hiragino Sans GB", sans-serif', showLabel: true, // Whether to display the scale line and the scale value on the axis }}, yaxis: {show: true, showTicks: {show: true, showTicks: ShowTickMarks: false, // Sets whether to display the scale autoScale: true, borderWidth: 1, tickOptions: {show: True, showLabel: false, showMark: false, showGridline: true, formatString: '￥%.2f'}},}, grid: {drawGridLines: True, drawBorder: false, shadow: false, borderColor: '#000000', // Sets the color of the chart's (outermost) border. 1 // Set the (outermost) border width of the chart}, highlighter: {show: false}}); }, error: function () {alert(" get graphic statistics failed!" ); }}); };Copy the code

4. The rendering

This article is written here, a preliminary look at the official example, the function is quite powerful, the use is also very convenient, easy, according to the needs of the project, the follow-up may also add some graphics. However, some problems have been found in the process of use, and some functions may not be satisfied.

Article content if write existence question welcome message to point out, let us common exchange, common discussion, common progress ~~~

If the article is helpful to you, move your little hands to praise, encourage, give me the power to move forward.

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”