Question

我正在使用canvasjs中的stackedColumn图表，从$ ajax响应中提供数据并且没有显示列。我整理了一个小提示，展示了我正在做的事情：

<input id="Button1" type="button" value="button" />
<div id="chartContainer" style="height: 300px; width: 100%;"></div>



$('input:button').on('click', function () {
var response = <view fiddle for json>

var JSONresponse = JSON.stringify(response).substring(6, JSON.stringify(response).length - 2);

            JSONresponse = JSONresponse.replace(/\\/g, '');
            var jsonObject = $.parseJSON(JSONresponse);

            // QuoteStatus, AssignedTo, Amount

            var currentAssignedTo; //this lets us keep track of who we're working on. 
            //    If the name of hte current obj is not hte currentassignedto, then we are on to a new person

            var assignedToCount = -1;

            var chart = new CanvasJS.Chart("chartContainer",
                {
                    title: {
                        text: "Total of Jobs per Status",
                        fontFamily: "arial black",
                        fontColor: "#695A42"
                    },
                    animationEnabled: true,
                    toolTip: {
                        shared: true,
                        content: function (e) {
                            var str = '';
                            var total = 0;
                            var str3;
                            var str2;
                            for (var i = 0; i < e.entries.length; i++) {
                                var str1 = "<span style= 'color:" + e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: $<strong>" + e.entries[i].dataPoint.y + "</strong><br/>";
                                total = e.entries[i].dataPoint.y + total;
                                str = str.concat(str1);
                            };
                            str2 = "<span style = 'color:DodgerBlue; '><strong>" + (e.entries[0].dataPoint.x) + "</strong></span><br/>";
                            total = Math.round(total * 100) / 100;
                            str3 = "<span style = 'color:Tomato '>Total:</span><strong> $" + total + "</strong><br/>";

                            return (str2.concat(str)).concat(str3);
                        }
                    },
                    axisY: {
                        valueFormatString: "$#",
                        gridColor: "#B6B1A8",
                        tickColor: "#B6B1A8",
                        interlacedColor: "rgba(182,177,168,0.2)"
                    },
                    data: []
                });

            $.each(jsonObject, function (i, obj) {

                if (obj.AssignedTo !== currentAssignedTo) {
                    //we're either on the first row or are moving into a new person   color: colors[assignedToCount],
                    currentAssignedTo = obj.AssignedTo;
                    assignedToCount += 1;
                    chart.options.data.push({ type: 'stackedColumn', showInLegend: true, name: obj.AssignedTo, dataPoints: [] });
                } //end if

                chart.options.data[assignedToCount].dataPoints.push({ y: obj.Amount, label: obj.quoteType });

            }); // end $.each                       

            chart.render();
        })

我依赖的一些资料：https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/column/coal_reserves/

https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/column/google_revenue/

Answer 1

丹威尔，

数据点y值应该是数字，但在json中它存储为字符串。因此，将其更改为json本身的数字或解析时应该适用于您的情况。

chart.options.data[assignedToCount].dataPoints.push({ y: Number(obj.Amount), label: obj.quoteType });

请检查this updated JSFiddle。

canvasjs没有在图表中显示条形图

1 个答案: