有条件的类别和系列

时间:2015-02-09 11:27:47

标签: javascript highcharts

图表代码:

        <script type="text/javascript">
$(function () {
$("#formulario").submit(function() {
    var cidade = $("#cidade").val();
    var cidade_nome = $( "#cidade option:selected" ).text();
    var mans_00 = $('#mans_00:checked').val();
    var mans_05 = $('#mans_05:checked').val();
    var mans_10 = $('#mans_10:checked').val();
    var registro;
    var param_1;
    console.log(cidade);
    $.post('envia.php', {cidade: cidade}, function(resposta) {
    resposta = JSON.parse(resposta);

      for(var i=0; i<resposta.length; i++) {
             registro = resposta[i];
            console.log(registro.man_ins_prod_05);
        }   
    $('#container2').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [

                if(mans_00==mans_ins_area_00)
                {'2000',}
                '2005',
                '2010'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Mandioca (ton)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} ton</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: cidade_nome,
            data: [Number(registro.man_ins_prod_00), Number(registro.man_ins_prod_05), Number(registro.man_ins_prod_10)]

        }]
        });
});
    });
});
        </script>

我的问题是:如果选中复选框mans_00,则将'2000'放入类别中。我尝试以下形式: PS:mans_00包含mans_ins_area_00

如果(mans_00 == mans_ins_area_00)             { '2000',}             '2005',             '2010' 的

此代码不起作用

1 个答案:

答案 0 :(得分:1)

我认为这就是你所需要的 http://jsfiddle.net/jzkvzo3z/3/

您需要一个处理程序$('#myform :checkbox').click(function(){。每次选中/取消选中复选框时,都会调用此函数。在这个处理程序里面就是所有需要的逻辑您可以更改类别以及与这些类别相关的所有数据。

chart.xAxis[0].setCategories(categories);
chart.series[0].setData(john_data);

修改

哈,我忘了解释你做错了什么。要构建图表,请调用函数:$('#container2').highcharts({。该函数采用一个参数,这是一个数据结构。数据结构描述了您要构建的图表。数据结构如下所示。

var data_structure = {
     descriptor1 : value, //Value may be Integer, String ....
     descriptor2 : value, 
     descriptor3 : function () {....code.......},  //A descriptors value can be a function too.
     descriptor4 : [2,4,5,6],  //Array
     ..............................
}

您不能将代码放在结构中。