如何在我的morris.js圆环图传奇中添加一个数字？

Question

我有几个morris.js图表​​，根据某些搜索字词从我的数据库中填充。我使用以下代码来构建一个＆＃34; Legend＆＃34;对于mmy圆环图。代码工作正常，但我正在努力添加一个数字和文本，我得到一个consoole错误：＆＃34; 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)
})

但是这给了我一个错误，即没有定义值，我想从value(v)

取donutParts

这是我的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＆＃39;正在做。

创建<span></span>的对象dom - ＆gt;添加标签[＆＃39;标签＆＃39;]（在您的示例中看似英国）中的文字 - ＆gt;添加一些<i>标签 THEN
找到新创建的标签 - ＆gt;添加背景颜色的CSS规则
THEN
将其添加到#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'])