将多个文本框值传输到饼图切片(百分比)

时间:2014-12-20 19:03:41

标签: javascript html highcharts

感谢您对我过去的问题的帮助。我想这会是最后一次。 这是我在问题上的最新代码

http://jsfiddle.net/3es9gzxy/6/

在那里我有5个带文本框的类别。

我的目标是这样的

Texbox 1价值:20 Texbox 2价值:20 Texbox 3价值:20 Texbox 4价值:22 Texbox 5价值:18

图表的价值在我的文本框中是相同的但不起作用我怎样才能实现这一点?您可以尝试编辑它。 TY

这是我的代码的一部分

(function () {
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: 1,//null,
                plotShadow: false
            },
            title: {
                text: 'Crimes for this Year'
            },
            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: [
                    ['Arson',   0],
                    ['Homicide',       0],
                    ['Physical Injuries',   0],
                    ['Carnapping',       0],
                    ['Ethical Law Violation',       0]

                                ]
            }]
        });
    });
                     function pie (){                 
    $('#chart').on('click', function() {

    var value = Number($('#arson').val());
    var value = Number($('#homicde').val());
    var value = Number($('#physicalinjuries').val());
    var value = Number($('#carnapping').val());
    var value = Number($('#elv').val());

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

       myChart.series[0].data[0].update(value); 
     myChart.series[0].data[1].update(value); 
         myChart.series[0].data[2].update(value); 
     myChart.series[0].data[3].update(value); 
         myChart.series[0].data[4].update(value); 

    });
    }

1 个答案:

答案 0 :(得分:0)

你犯的是一个非常明显的错误:每次读取一个值都会删除前一个值。你还有多少时间重新定义了作为一个新变量的价值...你可能想要&#34;使用严格的&#34 ;;对这种错误提出异常。
你也拼错了凶杀案&#39; in&#39; homicde&#39;,这阻止了计算 事情只有在第一次点击后才会起作用,所以我改变了小提琴,开始准备好dom,并直接挂钩点击处理程序。
在那之后,你可以看到你有非常相似的代码:时间来制作一个功能!!

http://jsfiddle.net/gamealchemist/3es9gzxy/8/

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

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

    var wrongValue = false;

    function setValue(type, slot) {
        var value = Number($('#' + type).val());
        if (isNaN(value) || value === undefined) {
            wrongValue = true;
            value = 0;
        }
        myChart.series[0].data[slot].update(value);
    }

    setValue('arson', 0);
    setValue('homicide', 1);
    setValue('physicalinjuries', 2);
    setValue('carnapping', 3);
    setValue('elv', 4);

    if (wrongValue) {
        // warn the user.
    }

});