2014-05-08 14 views
6

Ho implementato un grafico nel mio progetto e funziona bene. Ora volevo aggiungere un punto dinamicamente su un particolare X-Axisonclick.Aggiungi punti utilizzando Javascript/Jquery

Qui c'è un po 'di quello che ho provato finora. Fiddle Demo

E il codice

plotOptions: { 
    series: { 
    cursor: 'ns-resize', 
    point: { 
     events: { 
      drag: function(e) {}, 
      drop: function() { 
       var y_val = Highcharts.numberFormat(this.y, 2); 
       var x_val = Highcharts.numberFormat(this.x, 2); 
       updater(y_val, x_val); 
       console.log(options.series[1].data); 
      } 
     } 
    }, 

Ora c'è un modo per aggiungere un punto X-axis al clic. Esempio se clicchiamo tra 10%-20%, quindi un punto di 15% dovrebbe essere aggiunto su X-Axis. Inoltre dovrebbe essere aggiunto in tabella.

Grazie per l'aiuto

+0

No, non è possibile aggiungere punti al 15%, quando si utilizza categorie. Categoria ho solo un valore, niente tra. È necessario passare dall'asse categorizzato al lineare. Quindi, utilizzare [questa demo] (http://www.highcharts.com/demo/dynamic-click-to-add) come base per l'aggiunta di punti sul clic del grafico. –

+0

È possibile. possiamo controllare l'array –

risposta

5

Hi questo può essere un modo alternativo dal modo in cui il vostro obiettivo non è pienamente raggiunto, ma vi do alcune idee come si può raggiungere Ho usato i cookie per l'attuazione di questo


La testa deve essere assomiglia

<head> 

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="Scripts/jquery.cookies.2.2.0.js" type="text/javascript"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 

Questo è il vostro html

<table id="datatable" style="float:left;"> 
    <thead> 
     <tr> 
      <th>X Axis</th> 
      <th>Y Axis</th> 
     </tr> 
    </thead> 
    <tbody> 

    </tbody> 
</table> 

Non ho incluso i punti nella tabella che si dovrà fare


Ora, questo dovrebbe essere il vostro scritto

<script> 
    window.onload = function() { 
     var val; 
     var cat_array1; var cat_array2; 
     var data_variables = [0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1]; 
     /*global window: false */ 
     if ($.cookie("cat_array1")) { 
      var cookie = unescape($.cookie('cat_array1')) 
      cat_array1 = cookie.split(',') 
      var cookie1 = unescape($.cookie('cat_array2')) 
      cat_array2 = cookie1.split(',') 



     } 
     else { 
      var cat_array1 = ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']; 
      var cat_array2 = ['5%', '10%', '15%', '20%', '25%', '30%', '35%', '40%', '45%', '50%']; 

      $.cookie("cat_array1", cat_array1.join(',')); 
      $.cookie("cat_array2", cat_array1.join(',')); 

     } 
     function regenrate() { 

      options = { 

       chart: { 
        renderTo: 'container', 
        animation: false, 
        events: { 
         click: function() { 
          alert('click'); 
         } 
        } 
       }, 

       xAxis: { 
        categories: cat_array1 
       }, 

       plotOptions: { 
        series: { 
         cursor: 'ns-resize', 
         point: { 
          events: { 

           drag: function (e) { 


           }, 
           drop: function() { 

            var y_val = Highcharts.numberFormat(this.y, 2); 
            var x_val = Highcharts.numberFormat(this.x, 2); 
            updater(y_val, x_val); 
            console.log(options.series[1].data); 
           }, 
           click: function() { var options = this.options; alert('Person who like' + options.name + ' ' + options.personName); } 
          } 
         }, 
         stickyTracking: true 
        }, 
        column: { 
         stacking: 'normal' 
        } 
       }, 

       tooltip: { 
        yDecimals: 2 
       }, 

       series: [{ 
        name: 'main', 
        data: data_variables, 
        draggableY: false, 
        dashable: true 
       }, { 
        name: 'modifier', 
        data: [0, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1], 
        draggableY: true 
       }] 

      } 

      function updater(yv, xv) { 
       //console.log("Y :" + yv + ",X: " + xv); 
       var num = xv.match(/^\d+/); 
       console.log(num); 
       options.series[1].data[num] = parseInt(options.series[1].data[num].y.toFixed(1)); 
       var chart = new Highcharts.Chart(options); 
       $('#b' + num).html(yv); 
       console.log(yv + ", " + xv); 
       return false; 
      } 

      var chart = new Highcharts.Chart(options); 


      var yAxis = chart.xAxis[0]; 
      var onYaxisRedraw = function() { 
       for (var tickPos in yAxis.ticks) { 
        if (tickPos != '-1') { 
         var $element = $(yAxis.ticks[tickPos].label.element); 
         $element.unbind('click'); 
         $element.click(function (e) { 

          // cat_array1.push(1,parseInt(e.toElement.innerHTML.replace('%', '')) + 5 + '%'); 
          var aa = jQuery.inArray(e.toElement.innerHTML, cat_array1); 
          cat_array1.splice(parseInt(aa + 1), 0, parseInt(e.toElement.innerHTML.replace('%', '')) + 5 + '%'); 
          // options.xAxis = cat_array1; 
          $.cookie("cat_array1", cat_array1.join(',')); 
          // chart.series[0].setData(null,true); 
          // var chart = new Highcharts.Chart(options);//$('#container').highcharts().xAxis[0].update() 
          window.location.reload(); 
          // regenrate() 

         }); 
        } 
       } 
      } 
      onYaxisRedraw(); 

      yAxis.redraw(onYaxisRedraw); 

     } 
     regenrate(); 

    } 



</script> 

Explaination :- 

avete requisito che dovrebbe essere cliccato tra il 10% e il 20% ma penso che non potrebbe essere raggiunto anche se non sono sicuro :)

Ma se si fa clic su un 10% poi a tale matrice è possibile aggiungere 5 e quindi può farlo spero capirai il mio punto

Questo è il modo alternativo se si fa clic su un 10% schierato poi 15% verrà aggiunto ad esso

Ok spero capirai il mio punto ............

+1

Risposta molto descrittiva utile – Shell

+0

sì che uno era descrittivo .. :) –

Problemi correlati