HTML輸入值到餅圖系列數據（HighCharts）

我想從html輸入中獲取值並將這些值插入到JSON系列數據中。HTML輸入值到餅圖系列數據（HighCharts）

下面是用靜態數據加載餅圖的函數，但我希望每次加載頁面時都從我的html輸入中獲取值，並讓這些值填充餅圖。

我是JSON的新手，所以任何想法都將不勝感激。

謝謝！

$(function() { 

    $('#user_bills_pie').highcharts({ 

     chart: { 

      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: '' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '{point.name}', 

       } 
      } 
     }, 
        series: [{ 
      type: 'pie', 
      name: 'Monthly Bills', 
      data: [ 
       ['Cell Phone', 45.0], 
       ['Mortgage',  26.8], 
       ['Credit Card', 8.5], 
       ['Cable/Internet',  6.2], 
       ['Electric', 0.7] 
      ] 
     }] 
    }); 
});

來源

2013-10-13 Erik Wantland

您創建圖表後，您將需要得到你的JavaScript做線沿線的東西：

var chart = $('#user_bills_pie').highcharts(); 
chart.series[0].addPoint(['Something',15]);

的假設去，你將有兩個文本框 - 一個用於字段名，和其他與價值，你可以填充它是這樣：

<input type="text" id="item_name" /> <input type="number" id="item_value" /> 
<input type="button" value="Clickity Click" id="click_me" />

後，你將需要記錄按鈕的點擊：

chart.series[0].addPoint([$("#item_name").val(),parseFloat($("#item_value").val())]);

請記住，您的所有信息都沒有在這裏進行過處理，您可能想要使用jQuery中提供的類似isNumeric（）的函數。

來源

2013-10-13 21:43:44 Duniyadnd

你需要通過javascript或jquery vlue並通過變量粘貼到json中。

$('#btn').click(function(){ 
    var val1, 
     val2, 
     options; 

    val1 = parseFloat($('input[name=fir]').val()); 
    val2 = parseFloat($('input[name=sec]').val()); 

    options = { 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [val1,val2] 
     }] 
    }; 

    $('#container').highcharts(options); 
});

http://jsfiddle.net/JgAPW/

來源

2013-10-14 11:27:37

HTML輸入值到餅圖系列數據（HighCharts）

回答

相關問題