使用HTML文本框的值作爲HighCharts百分比

HTML代碼

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

的JavaScript

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: 1,//null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2014' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       { 
        name: 'Chrome', 
        y: 12.8, 
        sliced: true, 
        selected: true 
       }, 
          ] 
     }] 
    }); 
});

這段代碼的輸出是一個餡餅具有Chrome（15），IE（31）和Firefox（53）內部值的圖表。

這裏是組文本框和一個按鈕：

Number of Arson: <input type="text" id="arson" name="arson"> 
    Number of Homicide: <input type="text" id="homicide" name="homicide"> 
    Number of Physical Injuries: <input type="text" id="physicalinjuries" name="physicalinjuries"> 
    Number of Carnapping: <input type="text" id="carnapping" name="carnapping"> 
    Number of Ethical Law Violation: <input type="text" id="elv" name="elv"> 
<input type="submit" id = "chart" value="Submit">

是否有可能通過文本框的值，並用它作爲自定義百分比（切片）的圖表（PIE）在當按鈕點擊？

我的目標是調用一個PHP函數，它將使用tablename中的select（count）並將其傳遞給文本框，然後當按下該按鈕時，該值將被髮送到PIE圖表。

來源

2014-12-20 paul pagente

是的！這是可能:) –

謝謝你的精彩答案，如何？ :) –

只是開玩笑:) http://stackoverflow.com/questions/11775385/how-to-set-dynamic-data-in-highcharts/11786087#11786087 –

$('#chart').on('click', function() { 

    var value = Number($('#arson').val()); 

    var myChart = $('#container').highcharts(); 

    myChart.series[0].data[0].update(value); 

});

來源

2014-12-20 16:20:10 Slime

你可以請更深入地解釋這一點嗎？只是舉一個文本框。如果它與你確定 –

老實說，我不會如何嘗試它 –

好吧，讓我重新使用它來使用您的代碼.... – Slime

使用HTML文本框的值作爲HighCharts百分比

回答

相關問題