dongyou9373
dongyou9373
2014-12-20 16:12

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

I have the following code:

HTML Code

<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
                },
                            ]
        }]
    });
});

The output of this code is a Pie Chart with a value of Chrome(15),IE(31) and Firefox(53) inside of a div.

Here is the set of Textboxes and a button:

    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">

Is it possible to pass the value of textbox and use it as a custom percentage(slices) in a chart(PIE) when the button is clicked?

My goal here is call a PHP Function that will use this select (count) from tablename and pass it to the textbox then when the button is pressed that value will be sent to the PIE Chart.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doujing2017 doujing2017 7年前
    $('#chart').on('click', function() {
    
       var value = Number($('#arson').val());
    
       var myChart = $('#container').highcharts();
    
       myChart.series[0].data[0].update(value); 
    
    });
    
    点赞 评论 复制链接分享

相关推荐