canvasjs 不在图表中显示条形

丹·维尔

我正在canvasjs 中处理一个stackedColumn 图表,从$ajax 响应中提供数据并且没有显示列。我整理了一个小提琴,展示了我正在使用的东西:

https://jsfiddle.net/azjuzuu0/4/

<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/

维什瓦斯

丹·维尔

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

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

请检查这个更新的 JSFiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用ng-repeat在<div>内创建多个CanvasJS图表

来自分类Dev

CanvasJS中的动态堆积列

来自分类Dev

动态确定要显示的饼图数量,并使用CanvasJS在单个页面上显示每个饼图

来自分类Dev

如何在CanvasJS中向散点图添加最佳拟合线(趋势线)?

来自分类Dev

图形不与Jinja,Flask和CanvasJS一起显示

来自分类Dev

将CanvasJS中的json对象分配给javascript变量

来自分类Dev

如何使用jsp和CanvasJS在图形中显示信息?

来自分类Dev

CanvasJS React-如何在处理单击事件的同时使饼图切片突出显示(又名爆炸)

来自分类Dev

从clojurescript(canvasjs)调用javascript

来自分类Dev

使用JSON加载数据的canvasJS RangeArea图表

来自分类Dev

当鼠标悬停在图例点上时,CanvasJs在图表中隐藏某些线

来自分类Dev

CanvasJS与Excel兼容并制作图表吗?

来自分类Dev

CanvasJS中的不间断空格

来自分类Dev

CanvasJS:使用data.php,json编码和ajax(带宽计量器)使图表动态化

来自分类Dev

图表无法正确呈现,canvasjs

来自分类Dev

CanvasJS透明背景

来自分类Dev

无论鼠标悬停如何,始终在 CanvasJS 中显示工具提示

来自分类Dev

渲染 Canvasjs 图表后更改 div 边框

来自分类Dev

如何使用 JSON 数据创建 CanvasJS 图表?

来自分类Dev

如何通过从canvasjs中的AJAX调用获取输入来绘制对数刻度的图形

来自分类Dev

canvasjs 范围柱状图在水平轴下方时更改条形颜色和宽度

来自分类Dev

不知道为什么CanvasJS图表代码导致空白页

来自分类Dev

如何通过 DOM-Container 访问 canvasJS 图表

来自分类Dev

如何在 CanvasJS 图表中显示格式化的日期时间?

来自分类Dev

如何使用 Jquery 删除 canvasjs 中的试用版水印(无需许可)

来自分类Dev

CanvasJS Graph 中的点存在但不可见

来自分类Dev

CanvasJS 图表无法使用幻灯片/轮播容器正确呈现

来自分类Dev

如何在 canvasjs 图表上隐藏间隔?

来自分类Dev

CanvasJs 创建了多个图表但只渲染了一个图表

Related 相关文章

  1. 1

    使用ng-repeat在<div>内创建多个CanvasJS图表

  2. 2

    CanvasJS中的动态堆积列

  3. 3

    动态确定要显示的饼图数量,并使用CanvasJS在单个页面上显示每个饼图

  4. 4

    如何在CanvasJS中向散点图添加最佳拟合线(趋势线)?

  5. 5

    图形不与Jinja,Flask和CanvasJS一起显示

  6. 6

    将CanvasJS中的json对象分配给javascript变量

  7. 7

    如何使用jsp和CanvasJS在图形中显示信息?

  8. 8

    CanvasJS React-如何在处理单击事件的同时使饼图切片突出显示(又名爆炸)

  9. 9

    从clojurescript(canvasjs)调用javascript

  10. 10

    使用JSON加载数据的canvasJS RangeArea图表

  11. 11

    当鼠标悬停在图例点上时,CanvasJs在图表中隐藏某些线

  12. 12

    CanvasJS与Excel兼容并制作图表吗?

  13. 13

    CanvasJS中的不间断空格

  14. 14

    CanvasJS:使用data.php,json编码和ajax(带宽计量器)使图表动态化

  15. 15

    图表无法正确呈现,canvasjs

  16. 16

    CanvasJS透明背景

  17. 17

    无论鼠标悬停如何,始终在 CanvasJS 中显示工具提示

  18. 18

    渲染 Canvasjs 图表后更改 div 边框

  19. 19

    如何使用 JSON 数据创建 CanvasJS 图表?

  20. 20

    如何通过从canvasjs中的AJAX调用获取输入来绘制对数刻度的图形

  21. 21

    canvasjs 范围柱状图在水平轴下方时更改条形颜色和宽度

  22. 22

    不知道为什么CanvasJS图表代码导致空白页

  23. 23

    如何通过 DOM-Container 访问 canvasJS 图表

  24. 24

    如何在 CanvasJS 图表中显示格式化的日期时间?

  25. 25

    如何使用 Jquery 删除 canvasjs 中的试用版水印(无需许可)

  26. 26

    CanvasJS Graph 中的点存在但不可见

  27. 27

    CanvasJS 图表无法使用幻灯片/轮播容器正确呈现

  28. 28

    如何在 canvasjs 图表上隐藏间隔?

  29. 29

    CanvasJs 创建了多个图表但只渲染了一个图表

热门标签

归档