【求高人】用highcharts实现动态生成对比柱状图的问题

[darlin_緢]

用Ajax在前台取数据，并用柱状图显示出来。
前台代码：

 var colors;
        $(function () {
            $(document).ready(function () {
                colors = Highcharts.getOptions().colors;
                categories = [];
                name = '';
                data = [];

                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: '多人工作量对比图'
                    },
                    subtitle: {
                        text: '已投入工作量--审定工作量'
                    },
                    xAxis: {
                        categories: categories
                    },
                    yAxis: {
                        title: {
                            text: '工作量（小时/人）'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        backgroundcolor: '#fff',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 70,
                        y: 20,
                        floating: true,
                        shadow: true
                    },
                    plotOptions: {
                        column: {
                            cursor: 'pointer'
                        }
                    },
                    tooptip: {
                        formatter: function () {
                            return '' + this.x + "%%" + this.y + "";
                        }
                    },
                    series: [{
                        name: '',
                        data: data
                    }]
                })
            })
        })
        function GetRepDataByCondition(param) {
            var condition = GetConditions();
            AjaxAns.GetRepDataByCondition(param, condition, GetRepDataByConditionResult_CallBack);
        }

        function GetRepDataByConditionResult_CallBack(result) {
            if (result.value != null) {
                name = "已投入工作量";
                for (var i = 0; i < result.value.length; i++) {
                    categories[i] = result.value[i].Key;
                    var valueTemp = (result.value[i].Value).split("#"); //工作量值
                    if (valueTemp.length > 0) {
                        if (valueTemp[0].toString() == "" || valueTemp[1].toString() == "") {
                            data[i] = ["", 0];
                        }
                        else {
                            data[i] = ["", parseFloat(valueTemp[0])];
                        }
                    }
                }
                chart.xAxis[0].setCategories(categories);
                chart.series[0].remove();
                chart.addSeries({ name: name, data: data });
            }
        }

如上代码，可以直接显示出柱状图。


问题如下：
从数据库中取出的数据是这样的格式的：
张三 10#20
李四 50#5

现在要将第一列显示为横坐标，而第二列为纵坐标。两个数字分别为两个柱状图。


怎么实现这种对比的柱状图啊？？？

[darlin_緢]

自己顶一个

[darlin_緢]

这个对比的柱状图，我后来参考官网实现了，代码如下：

        var colors;
        $(function () {
            $(document).ready(function () {
                colors = Highcharts.getOptions().colors;
                categories = [];
                name = '';
                data = [];

                chart0 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
                    title: {
                        text: '多人工作量对比图'
                    },
                    subtitle: {
                        text: '已投入工作量--审定工作量'
                    },
                    xAxis: {
                        categories: categories
                    },
                    yAxis: {
                        title: {
                            text: '工作量（小时/人）'
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        backgroundcolor: '#fff',
                        align: 'left',
                        verticalAlign: 'top',
                        x: 40,
                        y: -10,
                        floating: true,
                        shadow: true
                    },
                    plotOptions: {
                        column: {
                            cursor: 'pointer'
                        }
                    },
                    tooptip: {
                        formatter: function () {
                            return '' + this.x + "%%" + this.y + "";
                        }
                    },
                    series: []
                })
            })
        })

        function GetRepDataByCondition(param) {
            var condition = GetConditions();
            if (condition != null) {
                    AjaxAns.GetRepDataByCondition(2, condition, GetRepDataByConditionResult_CallBack);
            }
        }

        function GetRepDataByConditionResult_CallBack(result) {
            if (result.value != null) {
                name1 = "已投入工作量";
                name2 = "审定工作量";
                data1 = [];
                data2 = [];
                for (var i = 0; i < result.value.length; i++) {
                    categories[i] = result.value[i].Key;
                    var valueTemp = (result.value[i].Value).split("#"); //工作量值
                    if (valueTemp.length > 0) {
                        if (valueTemp[0].toString() == "" || valueTemp[1].toString() == "") {
                            if (valueTemp[0].toString() == "") {
                                data1[i] = ["", 0];
                            }
                            if (valueTemp[1].toString() == "") {
                                data2[i] = ["", 0];
                            }
                        }
                        else {
                            data1[i] = ["", parseFloat(valueTemp[0])];
                            data2[i] = ["", parseFloat(valueTemp[1])];
                        }
                    }
                }
                chart0.xAxis[0].setCategories(categories);
                if (chart0.series.length > 0) {
                    for (var i = 0; i < 2; i++) {
                        chart0.series[0].remove();
                    }
                }
                chart0.addSeries({ name: name1, data: data1 });
                chart0.addSeries({ name: name2, data: data2 });
            }
        }

[darlin_緢]

重点就是对series的赋值和初始化的地方。。。

[jiangzhengdong]

那柱状图怎么调整两个柱子间的间距呢？上官网找了半天没发现哪个属性可以控制间距

[王向飞]

[分开_旅行]

楼主有没有好的解决办法了，如何显示多个name,而不是固定写死name值？？？？