如何将数字添加到我的 morris.js 圆环图图例中？

Question

我有几个 morris.js 图表，它们根据某些搜索词从我的数据库中填充。我使用以下代码为 mmy 圆环图构建 "Legend"。代码工作正常，但我正在努力添加数字和文本，我收到控制台错误：“ReferenceError：未定义值，这是我当前使用的代码（效果很好）：

// Build the Donut:
var donut = Morris.Donut({
    element: 'donut',
    data   : donutParts,
    colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['label']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
})

这会给我一个带有匹配颜色方块和适当标签的图例，例如：

[red] UK

但我想要：

[red] # UK

我试过使用 .integer 和其他类似的变体：

// Build the Donut:
var donut = Morris.Donut({
    element: 'donut',
    data   : donutParts,
    colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['label']).integer(['value']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
})

但这给了我未定义值的错误，我想从 donutParts

中获取 value(v)

这是我的 donutParts 变量：

// Fetch the data to populate the donut chart:
var chartData = JSON.parse( $('#chartData').val() );

// Break up the object into parts of the donut:
var donutParts = [];
$.each( chartData, function(k,v){
    donutParts.push({
        label: k,
        value: v
    });
});

有什么帮助吗？干杯！

***** 回答 ***** 以下代码给出了所需的输出：

// Build the Legend:
    donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
    })

这是执行给定答案后图例输出的 SS

非常感谢@WillParky93

Answer 1

所以我在评论中所说的在技术上是错误的，但在进一步阅读后，这就是 'donut.options.data.forEach' 正在做的事情。

创建 <span></span> 的对象 dom -> 添加来自标签 ['label'] 的文本（在你的示例中似乎是 UK） -> 添加一些 <i> 标签。
那么
找到新创建的标签 -> 添加背景颜色
的 CSS 规则那么
将它添加到您的#legend

所以这样想其实解法更简单；答案就是这样：

    // Build the Legend:
    donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
    })

变化发生在 .text(label['label'])，现在是 .text(label['value']+" "+label['label'])

如何将数字添加到我的 morris.js 圆环图图例中？

How can I add a number to my morris.js donut chart legend?

javascript

php

foreach

jquery

morris.js