Question

我需要显示两年的产品销售数据。但是数据要多得多。如您所见，这是我想要的输出，现在它是静态的。

这是fiddle，到目前为止，我已经尝试过了。我已经尝试过嵌套值，但它什么也没显示。在2018年，我只给了单个值作为json对象来测试它是否有效。尽管我也尝试通过提供所有嵌套值

 var comaprechart = c3.generate({
            bindto: '#' + chartid,
            data: {
                x: "x",
                xSort: false,
                columns: [
                    ["x", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    ["2018", {
                            "Total Revenue" : "$1,500.00",
                            "Units Sold": "100",
                            "Units Purchased" : "150"
                        }, 20, 30, 20, 10, 20, 30, 20, 10, 20, 30, 20],
                    // ["20118", 30, 10, 20, 30, 30, 10, 20, 30, 20, 10, 25, 15],
                    ["2019", 20, 30, 10, 10, 20, 40, 10, 24, 34, 14, 24, 10]
                ],
                type: 'spline',
                regions: cregions
            }, color: {
                pattern: ["#9edefd", "#7C9EE5", "#2e97ff"]
            },
            axis: {
                x: {
                    type: "category",
                    tick: {
                        outer: false,
                        fit: true,
                        centered: true,
                    },
                    lines: {
                        show: true
                    },
                    label: {
                        text: 'Month',
                        position: 'outer-center',
                    }
                },
                y: {
                    tick: {
                        outer: false,
                        format: function (d) { return d; }
                    },
                    label: {
                        text: 'Units Sold',
                        position: 'outer-middle'
                    }
                }
            },
            size: { width: 400, height: 250 },
            tooltip: {
                format: {

                },
                contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                    // console.log(d);
                    var $$ = this, config = $$.config,
                        titleFormat = config.tooltip_format_title || defaultTitleFormat,
                        nameFormat = config.tooltip_format_name || function (name) { return name; },
                        valueFormat = config.tooltip_format_value || defaultValueFormat,
                        text, i, title, value, name, bgcolor;
                    for (i = 0; i < d.length; i++) {

                        if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }

                        if (! text) {
                            title = titleFormat ? titleFormat(d[i].x) : d[i].x;
                            console.log(title);
                            text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2' class='hide'>" + title + "</th></tr>" : "");
                        }


                        name = nameFormat(d[i].name);
                        value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
                        bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);

                        text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
                        text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>";
                        text += "<td class='value'><tr><td>Revenue</td><td>$1,50" + [i] + ".00</td><tr><td>Units Sold</td><td>" + value + "</td><tr><tr><td>Units Purchased: </td><td>150</td></tr>";
                        text += "</tr>";
                    }
                    return text + "</table>";
                }

            },
            legend: {
                show: false
            }
        });


    }

我想要显示的预期输出

"Total Revenue" : "$1,500.00", "Units Sold": "100", "Units Purchased" : "150"

在2018年和2019年相同，如下图所示。目前，它仅显示单个值。

这是我想要的输出

Answer 1

我设法以某种方式显示工具提示。希望这也会对将来的人有所帮助。首先，我已经按照以下方式格式化了数据。

var ss = {
        "xval": ["x", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "2018": {
            "unit_solds": [29, 22, 33, 44, 55, 66, 77, 88, 99, 10, 8, 10],
            "revenue": [1500, 1600, 1200, 1234, 2134, 1234, 4567, 2345, 1232, 3467, 2345, 1100],
            "units_purchased": [150, 160, 120, 123, 213, 123, 456, 234, 123, 346, 235, 110],
        },
        "2019": {
            "unit_solds": [35, 21, 30, 34, 35, 26, 67, 82, 79, 18, 28, 60],
            "revenue": [1530, 1620, 1230, 1204, 2034, 1267, 4467, 2145, 2232, 3167, 1345, 1200],
            "units_purchased": [153, 162, 123, 120, 203, 121, 256, 334, 423, 146, 335, 210],
        }
    };

这有助于我映射数据，因此所有结果均显示在所选年份下。这是更新的小提琴的链接

updated fiddle

如何在c3图表中使用嵌套的json值jQuery的

1 个答案: