pioupiou1232 | Code :
- <!DOCTYPE html>
- <html lang="fr" xmlns:og="http://ogp.me/ns#">
- <head>
- <meta charset="iso-8859-1" />
- <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
- <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
- <script language="javascript" type="text/javascript" src="plugins/jqplot.highlighter.js"></script>
- <script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.js"></script>
- <script language="javascript" type="text/javascript" src="plugins/jqplot.enhancedLegendRenderer.js"></script>
- <script language="javascript" type="text/javascript" src="excanvas.js"></script>
- <link type="text/css" rel="stylesheet" href="style.css"></link>
- <body>
- <div id="chart1"></div>
- </body>
- <script>
- plot1 = null;
- data = [];
- mydata = [[-50,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
- mydata2 = [[1,11],[2,2],[3,7],[4,4],[5,7],[6,4],[7,8],[8,7],[9,6]];
- mydata3 = [[0,7],[1,1],[2,3],[3,8],[4,7],[5,4],[6,5],[7,7],[8,4]];
- series=0;
- addSeries = function(series) {
- series++;
- data.push(series);
- }
- addSeries(mydata);
- addSeries(mydata2);
- addSeries(mydata3);
- /*$(document).ready(function(){
-
- $.jqplot.postDrawHooks.push(function(){
- var swatches= $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch')
- var labels=$('table.jqplot-table-legend tr td.jqplot-table-legend-label');
- labels.each(function(index)){
- var color= $(swatches[index]).find("div div" ).css('background-color');
- $this.css('color', color);
-
- $(this).css('color', color);
- $this.css('white-space', 'nowrap');
- $(this).html(types[index]);
-
- }
- })*/
- $(document).ready(function() {
- $.jqplot.postDrawHooks.push(function() {
- var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
- var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
- labels.each(function(index) {
- //turn the label's text color to the swatch's color
- var color = $(swatches[index]).find("div div" ).css('background-color');
- $(this).css('color',color );
- //set type name as the label's text
- $(this).css('white-space', 'nowrap'); //otherwise Heavy Industry M12 will be in 3 lines
- $(this).html(types[index]);
- });
- });
- var types = ['rthdrt', 'trhdtrdh', 'hdrtrhd'];
- var counts = [mydata, mydata2 , mydata3];
- var total = 0;
- for (var i = 0; i < counts.length; i++) {
- total += counts[i];
- }
- var data = [];
- var precision = 2;
- var percentageSoFar = 0;
- for (var i = 0; i < counts.length; i++) {
- var count = counts[i];
- var percentage = parseFloat((count / total * 100).toFixed(precision));
- if (i == counts.length - 1) {
- percentage = parseFloat((100 - percentageSoFar).toFixed(precision));
- console.log("last count is = " + count + "; percentage is = " + percentage);
- }
- percentageSoFar += percentage;
- var row = [percentage, count];
- data.push(row);
- }
- plot1 = $.jqplot (
- 'chart1',data, {
- seriesDefaults: {
- showMarker: true,
- xaxis: 'xaxis',
- },
- /*animate:true,
- animateReplot:true,*/
- series: [
- { label : "MyLabel"},
- { label : "Poivre"},
- { label : "Cuivre"}
- ],
- legend:
- {
- show: true,
- location: 'se',
- showSwatch : true,
- renderer: $.jqplot.EnhancedLegendRenderer,
- rendererOptions : {
- seriesToggleReplot : {resetAxes: true},
- disableIEFading : false,
- }
- },
- cursor: {
- show: true,
- showVerticalLine: true,
- xaxis: "red",
- showHorizontalLine: false,
- showTooltipDataPosition: true,
- zoom: true,
- intersectionThreshold: 10,
- followMouse: true,
- useAxesFormatters:true,
- tooltipAxisGroups:[],
- },
- }
- );
- });
- $("#chart1" ).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
-
- var c_x = datapos.xaxis;
- var index_x = -1;
- var pos_index = 0;
- var low = 0;
-
- var high = data.data[0].length-1;
- while(high - low > 1){
- var mid = Math.round((low+high)/2);
- var current = data.data[0][mid][0];
- if(current <= c_x)
- low = mid;
- else
- high = mid;
- }
- if(data.data[0][low][0] == c_x){
- high = low;
- index_x = high;
- }else{
- var c_low = data.data[0][low][0];
- var c_high = data.data[0][high][0];
- if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
- index_x = low;
- }else{
- index_x = high;
- }
- }
- //Display marker and tooltip
- if(data.series[0].data[index_x]){
- var x = data.series[0].gridData[index_x][0];
- var r = 5;
- var highlightCanvas = $(".jqplot-highlight-canvas" )[0];
- var context = highlightCanvas.getContext('2d');
- context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
- context.strokeStyle = 'rgba(47,164,255,1)';
- context.fillStyle = 'rgba(47,164,255,1)';
- context.beginPath();
- context.arc(x,r,0,Math.PI*2,true);
- context.closePath();
- context.stroke();
- context.fill();
- //Display tooltip on nearest point
- var highlightTooltip = $(".jqplot-highlighter-tooltip" );
- var val_x = data.data[0][index_x][0];
- highlightTooltip.html(val_x);
- highlightTooltip.css({'bottom': -25, 'left': x+'px','display': 'block'});
- }
- });
- </script>
- </html>
|
Donc j'ai mon code avec pour avoir la même couleur du nom de label que du noùm de la line.
Le seul problème c'est que le graph est incrémenté avec des données format PieChart. Ce que j'aimerai fair c'est incrémenter des séries comme si c'étais des courbes,
par exemple (mydata/mydata2/mydata3).
Voilà
Message édité par pioupiou1232 le 13-05-2016 à 15:49:11
|