質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.91%

【Chart.js】ツールチップの表示内容を改行したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 5,544

score 12

 実現したいこと

現状Chart.jsにて以下イメージ画像上部のように凡例の内容をツールチップに表示しています。
しかし凡例の数が13個を超えた辺りからツールチップの表示範囲が縦に長すぎ、
canvasのサイズを超えて見切れてしまいます。

これ以上canvasのサイズは変えられないので
タイトルの通り指定数以降は改行して表示させたいです。
※以下イメージ画像下部のように。

探し方が悪いのか見つけられずに困っています。どなたかご教授下さい。
Chart.jsは2.7.1を使用しています。
イメージ説明

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="palette.js" type="text/javascript"></script>
<body>
    <canvas id="mybarChart2" height="245" width="550"></canvas>
</body>
<script>
    var myChart = "mybarChart2";
    var xlabel = ["111", "222", "333", "444", "555", "666", "777"];
    var ylabel = ["あいうえお", "かきくけこ", "さしすせそ", "たちつてと", "なにぬねの", "はひふへほ", "まみむめも", "やゆよ", "らりるれろ", "わを", "ん", "ん"];
    var hlxlabel = [];
        for(count in xlabel){
        var string ="";
        if(xlabel[count].length >= 7){
            string = xlabel[count].substr(0,6) + '…';
        }else{
            string = xlabel[count]
        }
        hlxlabel.push(string);
    }
    var hlylabel = [];
    for(count in ylabel){
        var string ="";
        if(ylabel[count].length >= 7){
            string = ylabel[count].substr(0,6) + '…';
        }else{
            string = ylabel[count]
        }
        hlylabel.push(string);
    }
    var colors = palette('rainbow', ylabel.length, 0, .5).map(function(hex) {return '#' + hex;})
    var dataLabelPlugin = {
        afterDatasetsDraw: function (chart, easing) {
            var ctx = chart.ctx;
            var sums = [];
            chart.data.datasets.forEach(function (dataset, i) {
                var meta = chart.getDatasetMeta(i);
                if (!meta.hidden) {
                    meta.data.forEach(function (element, index) {
                        // 積み上げ総計の初期化
                        if(i === 0){
                            sums[index] = 0;
                        }
                        // 総計ラベルの設定
                        ctx.fillStyle = 'rgb(0, 0, 0)';
                        var fontSize = 11;
                        var fontStyle = 'normal';
                        var fontFamily = 'Helvetica Neue';
                        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        var padding = 0;
                        var position = element.tooltipPosition();
                        // 総計出力
                        sums[index] = sums[index] + dataset.data[index];
                        if(i === (chart.data.datasets.length -1)){
                            ctx.fillText(sums[index].toString(), position.x, position.y - (fontSize / 2) - padding);
                        }
                    });
                }
            });
        }
    }
    var chart = new Chart(myChart, {
        type: 'bar',
        data: {
            labels: hlxlabel,
            datasets: [
                {label: ylabel[0],backgroundColor: colors[0],data: [1, 4, 3, 2, 5, 5, 8]},
                {label: ylabel[1],backgroundColor: colors[1],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[2],backgroundColor: colors[2],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[3],backgroundColor: colors[3],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[4],backgroundColor: colors[4],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[5],backgroundColor: colors[5],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[6],backgroundColor: colors[6],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[7],backgroundColor: colors[7],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[8],backgroundColor: colors[8],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[9],backgroundColor: colors[9],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[10],backgroundColor: colors[10],data: [1, 4, 3, 2, 5, 9, 8]},
                {label: ylabel[11],backgroundColor: colors[11],data: [1, 4, 3, 2, 5, 9, 8]},
            ]
        },
        options: {
            title:{
                text:"数字 × ひらがな",
                display:true,
                fontSize:17,
                fontStyle:'normal',
                padding:10,
            },
            scales : {
                xAxes : [ {
                    stacked : true,
                    categoryPercentage : 0.5,
                    ticks : {
                        autoSkip : false,
                        maxRotation : 30,
                    },
                } ],
                yAxes : [ {
                    stacked : true
                } ],
            },
            legend:{
                labels:{
                    boxWidth:10,
                    fontSize:10,
                    padding:6,
                    generateLabels: function(chart){
                        return chart.data.datasets.map( function( dataset, i){
                            return {
                                text: hlylabel[i],
                                fillStyle: dataset.backgroundColor,

                            };
                        })
                    },
                },
                display: true,
                position: "right",
            },
            maintainAspectRatio: false,
            responsive: false,
            tooltips:{
                mode:'label',
                position: 'customMode',//nearest
                callbacks:{
                    title: function (tooltipItem, data){
                        return xlabel[tooltipItem[0].index];
                    },
                },
            },
        },
        plugins: [dataLabelPlugin]
    });

    Chart.Tooltip.positioners.customMode = function(elements, eventPosition){
        var tooltip = this;
        if(!elements.length){
            return false;
        }
        var i, le;
        var x = 0;
        var y = 0;
        var count = 0;
        for(i = 0, len = elements.length; i < len; ++i){
            var el = elements[i];
            if(el && el.hasValue()){
                var pos = el.tooltipPosition();
                x += pos.x;
                y += pos.y
                ++count;
            }
        }
        return{
            x: Math.round(x / count),
            y: 207//Math.round(y / count)
        };
    }
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/10/24 14:09

    表示させているデータのサンプルとchart.js読み込み設定部分のコード提示は可能ですか?

    キャンセル

  • キャンセル

  • MORIZOU

    2018/10/24 14:34

    サンプルでhtmlで書いてます。汚いですがソースコードを追記しました。

    キャンセル

回答 1

checkベストアンサー

+2

customオプションでツールチップを作ることにより、canvas外に表示することが可能です。
自力で作るのは大変ですが、ドキュメントに例も挙がっているので試してみてはどうでしょうか?
http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
和訳:https://misc.0o0o.org/chartjs-doc-ja/configuration/tooltip.html#%E5%A4%96%E9%83%A8%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%83%83%E3%83%97

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/25 09:29

    回答ありがとうございます。
    これを利用すればある程度自由なツールチップが作れそうです。
    ちょっと難しそうですが勉強しながら頑張ってみます。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る