0

我正在尝试从 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]
            ]
        }]
    });
});
4

2 回答 2

0

创建图表后，您需要让您的 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-13T21:43:44.603 回答
0

您需要通过 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-14T11:27:37.283 回答