1

ツールチップに表示されるテーブルにフッターを追加しようとしています。この行の中に、json ファイルからロードされた特定のデータを表示したいと思います。

チャート：

<script>
    var scene;
    $.getJSON('assets/json/chartc3.json', function (data) {
        scene = data;
        var chart = c3.generate({
            bindto: '#chartc3',
            data:
                {
                    json: scene,
                    keys:
                    {
                        x: 'round',
                        value: ['Marketable', 'Total Requested Capacity', 'Your Bid'],
                    },
                    types: {
                        Marketable: 'area'
                    },
                    colors: {
                        Marketable: '#A09FA2',
                        'Total Requested Capacity': '#272E80',
                        'Your Bid': '#8EBF60'
                    }
                },
            axis:
            {
                x: {
                    tick:
                    {
                        culling:
                        {
                            max: 10
                        }
                    },
                    type: 'category'
                },
                y:
                {
                    min: 0,
                    padding: {
                        bottom: 0
                    },
                    tick:
                    {
                        values: [[0], [d3.max(d3.values(scene))]],

                        format: function (d) { return d3.format(',f')(d) + ' kWh/h' }
                        //or format: function (d) { return '$' + d; }
                    }
                }
            },
            tooltip: {
                contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                    var $$ = this, config = $$.config, CLASS = $$.CLASS,
        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;

                    // You can access all of data like this:
                    for (i = 0; i < d.length; i++) {
                        if (!(d[i] && (d[i].value || d[i].value === 0))) { continue; }

                        // ADD
                        if (d[i].name === 'data2') { continue; }


                        if (!text) {
                            title = 'MY TOOLTIP'
                            text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + 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 + "; border-radius: 5px;'></span>" + name + "</td>";
                        text += "<td class='value'>" + value + "</td>";
                        text += "</tr>";
                    }

                    **var surchargedata;
                    $.getJSON('assets/json/surcharge.json', function(data)
                    {
                        console.log("Prima"+text);
                        surchargedata=data;
                        text += "<tr class='" + CLASS.tooltipName + "-Surcharge" + "'>";
                        text += "<td class='name'>" + surchargedata[i].Surcharge+ "</td>";
                        text += "<td class='value'>" + surchargedata[i].Surcharge+ "</td>";
                        text += "</tr></table>";
                        console.log(text);
                    })**

                    return text;
                }
            }
        });
    });
</script>

ログを印刷したところ、テーブルが適切に生成されたように見えますが、ツールチップを見ると、次のようになります。

ここに画像の説明を入力

最後の行が見えません。

生成されたテーブルのログは次のとおりです。

    <table class='c3-tooltip'>
    <tr>
        <th colspan='2'>MY TOOLTIP</th>
    </tr>
    <tr class='c3-tooltip-name-Marketable'>
        <td class='name'><span style='background-color:#A09FA2; border-radius: 5px;'>
            </span>Marketable
        </td>
        <td class='value'>5,220,593 kWh/h</td>
    </tr>
    <tr class='c3-tooltip-name-Total Requested Capacity'>
        <td class='name'><span style='background-color:#272E80; border-radius: 5px;'>
            </span>Total Requested Capacity
        </td>
        <td class='value'>16,449,051 kWh/h</td>
    </tr>
    <tr class='c3-tooltip-name-Your Bid'>
        <td class='name'>
            <span style='background-color:#8EBF60; border-radius: 5px;'>
            </span>Your Bid
        </td>
        <td class='value'>100,000 kWh/h
        </td>
    </tr>
    <tr class='c3-tooltip-name-Surcharge'>
        <td class='name'>50.38</td>
        <td class='value'>50.38</td>
    </tr>
</table>
4

1 に答える 1

1

ツールチップを生成するときに、$.getJSON を使用して追加料金データをロードしています。また、追加料金の行は、コールバックでツールチップ用に生成しているテキストに追加されます。この時点で、実際のツールチップ関数は、$.getJSON 呼び出しの前に生成されたテキストとともに返されます。

これを修正する最も簡単な方法は、追加料金 $.getJSON を移動して元のスクリプトをラップすることにより、最初に追加料金データをロードすることです。

これが更新されたスクリプトです。

<script>
    var surchargedata;
    $.getJSON('assets/json/surcharge.json', function (data) {
        surchargedata = data;

        var scene;
        $.getJSON('assets/json/chartc3.json', function (data) {
            scene = data;
            var chart = c3.generate({
                bindto: '#chartc3',
                data:
                    {
                        json: scene,
                        keys:
                        {
                            x: 'round',
                            value: ['Marketable', 'Total Requested Capacity', 'Your Bid'],
                        },
                        types: {
                            Marketable: 'area'
                        },
                        colors: {
                            Marketable: '#A09FA2',
                            'Total Requested Capacity': '#272E80',
                            'Your Bid': '#8EBF60'
                        }
                    },
                axis:
                {
                    x: {
                        tick:
                        {
                            culling:
                            {
                                max: 10
                            }
                        },
                        type: 'category'
                    },
                    y:
                    {
                        min: 0,
                        padding: {
                            bottom: 0
                        },
                        tick:
                        {
                            values: [[0], [d3.max(d3.values(scene))]],

                            format: function (d) { return d3.format(',f')(d) + ' kWh/h' }
                            //or format: function (d) { return '$' + d; }
                        }
                    }
                },
                tooltip: {
                    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
                        var $$ = this, config = $$.config, CLASS = $$.CLASS,
            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;
                        console.log(JSON.stringify(d))
                        // You can access all of data like this:
                        for (i = 0; i < d.length; i++) {
                            if (!(d[i] && (d[i].value || d[i].value === 0))) { continue; }

                            // ADD
                            if (d[i].name === 'data2') { continue; }


                            if (!text) {
                                title = 'MY TOOLTIP'
                                text = "<table class='" + CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + 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 + "; border-radius: 5px;'></span>" + name + "</td>";
                            text += "<td class='value'>" + value + "</td>";
                            text += "</tr>";
                        }

                        console.log("Prima" + text);
                        text += "<tr class='" + CLASS.tooltipName + "-Surcharge" + "'>";
                        text += "<td class='name'>" + surchargedata[i].Surcharge + "</td>";
                        text += "<td class='value'>" + surchargedata[i].Surcharge + "</td>";
                        text += "</tr></table>";
                        console.log(text);

                        return text;
                    }
                }
            });
        });
    })
</script>
于 2015-06-25T04:01:19.350 に答える