Import three JS files: highcharts. JS, highcharts. SRC. JS, and excanvas. Compiled. js.
VaR chart; function showhighcharts (data) {var Options = {chart: {renderto: 'eriner1', // corresponds to the DIV's iddefaserseriestype: 'column '// The default is a bar chart // type: 'column'}, Title: {text: 'column chart of highcharts demo ', // you can specify the title bar name style: {margin: '10px 100px 0 0', // center itfont: 'normal 25px verdana, sans-serif' // set the title Font Style}, xaxis: {categories: [// set the X axis coordinate value '<= 30', '31-60', '61-120', '> = 100'], labels: {// X axis coordinate value style // rotation:-45, // align: 'right', style: {Font: 'normal 14px verdana, sans-serif'/color: 'white' }}, yaxis: {tickinterval: 5, // customize the scale MAX: 100, // the maximum value of the Y axis title: {text: 'percentile ', // tickpixelinterval: 10, margin: 50}, plotlines: [{value: 0, width: 1, color: '#808080'}]},/* Legend: {layout: 'signature', backgroundcolor: '# 6e6e6e', align: 'right', style: {left: 'auto', right: '5px ', top: '180px', bottom: 'auto' }}, */tooltip: {// The prompt message formatter: function () {return '<B>' + this. series. name + '</B> <br/>' + this. X + ':' + this. Y ;}}; // the following code is mainly used to construct the following data:/* [{Name: 'bf', data: [150,270,120,230,300,220,250,120,100,200, 90, 60] },{ name: 'lf ', data: [230,160,150,100,290,300,200,160,500,100, 86, 25] },{ name: 'tj', data: [60, 90,100,200,330,120,120,300, 80,200, 39, 10]}] */options. series = []; // data it is a list of values found from the database and a listfor (VAR I = 0; I <data. length; I ++) {options. series [I] = {Name: Data [I]. week, // type: 'column ', data: [parsefloat (data [I]. rl_30), parsefloat (data [I]. rl_60), parsefloat (data [I]. rl_120), parsefloat (data [I]. rm_120)]};} chart = new highcharts. chart (options);} function getdataforhighcharts () {var DATA = ""; // asynchronously requests data in the database, in this way, only the display part of the report can be refreshed ........... showhighcharts (data );}
Body section:
<Input type = "button" value = "display image" onclick = "getdataforhighcharts ()"> <Div id = "container1" align = "center" style = "height: 470px; margin: 0 0 0 0 "> </div>
The above Code only writes the main part and cannot be run successfully.