jqPlot堆叠条形图渲染偏移问题

Question

我正在使用jqPlot根据Web方法的数据生成堆积条形图。

图表成功渲染，但是空白。当我将pointLabels设置为“true”时，它们以混乱的方式出现在图表左侧。我猜测堆叠的条形图也被渲染到了图表之外，但我不明白原因。

请问有人能解释如何解决这个问题吗？

这里是WebMethod：

[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<dataPoint> getPartnerOrderVolumes()
    {
        List<dataPoint> p = new List<dataPoint>();
        DataTable dt = new DataTable();

        chart jep = new chart(5);
        foreach (chartData cd in jep.lstChartData)
        {
            dt = cd.GetData();
        }

        if (dt.Rows.Count > 0)
        {
            foreach (DataRow row in dt.Rows)
            {
                dataPoint dp = new dataPoint();
                dp.x1Value = row[2].ToString();
                dp.y1Value = row[3].ToString();
                dp.y2Value = row[4].ToString();
                p.Add(dp);
            }
        }

        return p;
    }

这里是被 Web 方法使用的 dataPoint 类：

        public class dataPoint
    {
        public string x1Value { get; set; }
        public string y1Value { get; set; }
        public string x2Value { get; set; }
        public string y2Value { get; set; }
        public string x3Value { get; set; }
        public string y3Value { get; set; }
        public string x4Value { get; set; }
        public string y4Value { get; set; }
    }

这里是它从数据库中提取的数据示例：

这里是 JavaScript：

            function OnSuccess_(response) {
            var aData = response.d;
            var types = [];
            var arrType = [];
            var arr = [];

            //  find distinct types (partners)
            for (i = 0; i < aData.length; i++) {
                if (types.indexOf(aData[i].y2Value) === -1) {
                    types.push(aData[i].y2Value);
                }
            }

            //  generate array containing arrays of each type
            for (i = 0; i < types.length; i++)
            {
                var filtered = aData.filter(function (el) {
                    return el.y2Value == types[i];
                });

                arrType.length = 0;

                $.map(filtered, function (item, index) {
                    var j = [item.x1Value, item.y1Value];
                    arrType.push(j);
                });

                arr.push(arrType);
            }

            $.jqplot.config.enablePlugins = true;

            plot1 = $.jqplot('chart5', arr, {
                title: 'Partner Order Volumes',
                // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
                animate: !$.jqplot.use_excanvas,
                stackSeries: true,
                seriesColors: ['#F7911E', '#32AB52', '#FFE200', '#29303A'],
                seriesDefaults: {
                    shadow: true,
                    pointLabels: { show: true },
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        varyBarColor: true,
                        animation: { speed: 2000 },
                        barDirection: 'vertical'
                    }
                },
                legend: {
                    show: true,
                    location: 'e',
                    placement: 'outside',
                    labels: types
                },
                axesDefaults: {
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: { fontSize: '10pt', textColor: '#000000' }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        tickOptions: { angle: -30 }
                    },
                    yaxis: {
                        label: 'Count of New Orders',
                        min: 0,
                        max: 200
                    }
                },
                highlighter: { show: false }
            });
        }
        function OnErrorCall_(response) {
            alert("Whoops something went wrong!");
        }
    });

- ks78

---

你能否在jsfiddle上设置一些样本数据？这可能有助于找到问题的根源。或者甚至只需通过WebMethod修改问题并提供JSON响应。 - user5294349

Answer 1

我认为有两件事情导致了你的问题： 第一：数组没有正确地复制。当将数据分成类型时，你使用 arrType.length = 0 重置了临时数组。这会重置数组长度，但不会创建新数组。这意味着实际上你推到 arr 的所有数组引用都指向同一个数组 - 最后处理的最后一个类型的数据。你需要将 arrType.length = 0; 替换为： arrType = []; 或者保留 .length = 0 并在将数组推到 arr 时使用以下代码： arr.push(arrType.slice()); 第二：使用了错误的渲染器。 xaxis 的渲染器应该是 $.jqplot.DateAxisRenderer 而不是你当前使用的 $.jqplot.CategoryAxisRenderer。日期渲染器也是一个插件，所以你需要确保包含以下内容（显然，路径要根据你的设置进行相应调整）： <script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script> 你希望 xaxis 上的 tickOptions 是这样的： tickOptions: { formatString: '%b %#d', angle: -30 } 通过这些调整，并使用从你的 C# 代码中派生的一些示例数据，JS 成功生成了以下内容： 希望解决了问题！

- user5294349

---

我在看到你的帖子之前就已经把它搞定了。有几个问题。 首先，我的javascript存在问题，无法为jqPlot准备好传入的数据。 其次，我认为提供给jqPlot的数据应该是x和y坐标数组的形式，如果是这样就太好了，但事实并非如此。 最后，我发现当系列元素数量不同时，jqPlot会出现问题，所以我也解决了这个数据问题。 之后，它就像魔术般地工作了。谢谢你的回复。 - ks78