23

タイムライン表示に取り組んでおり、ツールチップに表示したいデータがあります。現在、毎回の値のみが表示されます。そして、私はそれを変更する方法を見つけることができません. 以下の例は、値の形式を変更する方法を示していますが、表示される値は示していません

var chart = c3.generate({
data: {
    columns: [
        ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
        ['data2', 100, 200, 100, 40, 150, 250]
    ],
    axes: {
        data2: 'y2'
    }
},
axis : {
    y : {
        tick: {
            format: d3.format("s")
        }
    },
    y2: {
        show: true,
        tick: {
            format: d3.format("$")
        }
    }
},
tooltip: {
    format: {
        title: function (d) { return 'Data ' + d; },
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
           //value: d3.format(',') // apply this format to both y and y2
    }
}
});

http://c3js.org/samples/tooltip_format.htmlから取得したもの です。彼らはコンテンツ編集の例がないことを認めていますが、リファレンスやフォーラムには何も見つかりませんでしたが、コードを変更する提案 (ここにあります: https://github.com/masayuki0812/c3/blob/master/c3.jsの300 行目) 以下:

__tooltip_contents = getConfig(['tooltip', 'contents'], function (d, defaultTitleFormat, defaultValueFormat, color) {
        var titleFormat = __tooltip_format_title ? __tooltip_format_title : defaultTitleFormat,
            nameFormat = __tooltip_format_name ? __tooltip_format_name : function (name) { return name; },
            valueFormat = __tooltip_format_value ? __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;
                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 + "'></span>" + name + "</td>";
            text += "<td class='value'>" + value + "</td>";
            text += "</tr>";
        }
        return text + "</table>";
    })

誰かがそうしようとしましたか？プロセスを容易にする機能を開発しましたか？正しく行うためのヒントはありますか？関数が取得する d 値とは異なるデータまたはデータを使用できる方法でコードを変更する方法がわかりません。

4

8 に答える 8

9

ツールチップのレンダリングを制御し、データ値に応じてデフォルトのレンダリングを使用する場合は、次のようなものを使用できます。

tooltip: {
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
        if (d[1].value > 0) {
            // Use default rendering
            return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color);
        } else {
            return '<div>Show what you want</div>';
        }
    },
    format: {
        /**/
    }
}
于 2016-04-22T08:45:31.393 に答える