Question

我正在尝试从html输入中获取值并将这些值插入到JSON系列数据中。

下面是用于加载带有静态数据的饼图的函数，但我希望每次页面加载时从我的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]
            ]
        }]
    });
});

Answer 1

创建图表后，您需要使用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" />

之后你需要记录Button的点击：

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

请记住，这里没有对您的信息进行清理，您可能希望使用jQuery中提供的isNumeric（）函数。

Answer 2

你需要通过javascript或jquery获取值，并通过变量在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/

HTML输入值进入饼图系列数据（HighCharts）

2 个答案: