web-dev-qa-db-ja.com

Chart.jsパイのツールチップが切れる

私はChart.js円グラフをツールチップと共に使用していますが、何らかの理由でカットされています。

スクリーンショットが添付されましたが、面倒を見るための属性/オプションが見つかりませんでした。

とにかく面倒を見る必要はありますか？Tooltip being cut

ありがとう！

javascriptcanvaschart.js
24
Idan Gozlan

この不適切なカットオフは、ChartJSのGithubリポジトリでissue＃622として提起されました。

これはバグであると判断されました（明らかにこのバグはまだ修正されていません）

https://github.com/nnnick/Chart.js/issues/622

その問題に対応して、Robert Turrallには解決策があり、それは良い回避策であると言います。彼の修正案は次のとおりです。

これは、ツールチップがキャンバスの範囲内で生成され、修正が困難であるという事実によるものと確信しています。

私はドーナツチャートにも同じ問題があり、サンプルフォルダーの例に従ってカスタムツールチップを実装することでそれを解決しました-チャート初期化コードの既存のツールチップのフォントサイズとテンプレート設定と連動しました：

var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
  tooltipFontSize: 10,
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
  percentageInnerCutout : 70
});

カスタムツールチップコードについては、samples/pie-customTooltips.htmlをご覧ください。コピー/貼り付けするとすぐに機能しました。とても幸せです！

キャンバスの境界の外側に表示されるツールチップ：

PS：折れ線グラフの例もありますが、棒グラフでもうまくいくと思います。

17
markE

これの回避策を見つけました。 x軸に空白のラベルがあるので、最後のラベルエントリにいくつかのスペースを含むラベルを追加しました。これにより、ChartJSはラベルが収まるのに十分なスペースを残し、ツールチップが収まる十分なスペースも残しました。

さらに、データポイントに大きな円があり、右側の最後の円が前に切り取られていました。ラベルに余分なスペースを追加すると、それも修正されました。

これが、ラベルを作成するコードです。 ratingsは、以前に定義した実際のデータです。

// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
  labels.Push("");
}
labels[ratings.length-1] = "       ";

var data = {
  labels: labels,
  datasets: [
      {
          label: "Progress",
          strokeColor: "rgba(255,165,0,1.0)",
          pointColor: "white",
          pointStrokeColor: "rgba(255,165,0,1.0)",
          pointHighlightStroke: "#B87700",
          data: ratings
      }
  ]
};

グラフに実際のラベルがある場合でも、最後のラベルにスペースを追加して大きくすることができます。ラベルを中央に配置する場合、前後に同じ量のスペースを追加できます。

明らかに、これが機能するかしないかの制限がありますが、私の場合は7つのスペースを追加しました。

また、私のケースには右側に問題がありましたが、この質問には左側に問題があります。同じ修正が機能するはずですが、最初のラベルにスペースを置きます。

3
MindJuice

私の場合、ツールチップのテキストの量を減らすことで、この問題を回避できました。カスタムツールチップコールバックを使用してラベルテキストを指定しました。私の初期化は次のようになりました。

var chart = new Chart(canvas.getContext("2d"), {
    type: 'line',
    data: chartData,
    options: {
        responsive: true,
        tooltips: {
            callbacks: {
                title: function(tooltipItems, data) {
                    return tooltipItems[0].xLabel;
                },
                label: function(tooltipItems, data) {
                    return tooltipItems.yLabel;
                },
            }
        },
    },
});

まだプロジェクトにマージされていない修正が利用できるようです： https://github.com/chartjs/Chart.js/pull/1064

2
DPG

チャートに内部パディングを追加できます。たとえば、私の場合、右側にツールチップのカットがありました。

                    options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutoutPercentage: 60,
                    legend: {
                        display: false
                    },
                    animation: {
                        animateRotate: false
                    },
                    layout: {
                        padding: {
                            right: 40
                        }
                    }
                }
1
Mike Eshva

Chart.jsは、ツールチップの要素がbeyondキャンバス。

私のシナリオでは、ツールチップオプションオブジェクトの次のオプションを使用して、この特定のツールチップ内のテキストを絞って修正しました。

        tooltips.titleMarginBottom = 1;
        tooltips.bodySpacing = 1;
        tooltips.yPadding = 2;

ひどく十分なChart.jsは、ツールチップを下ではなくマウスの左側に表示することを正しく決定します。ツールチップをマウスと比較して表示する方向を選択できると便利です。

1
Peheje