Chart.jsのマルチラベルツールチップ

-1

最近、Chart.jsに応じて古いプロジェクトをv1からv2に移動しました。Chart.jsのマルチラベルツールチップ

ただし、以下のようなマルチラベルのツールチップを再作成することはできません。

この機能は、デフォルトで有効になっています。これをアーカイブするにはどのようなオプションを変更する必要があるのか誰にもわかりますか？

これまでのコードです。

new Chart(document.getElementById('mainChart'), { 
     type: 'line', 
     data: { 
      labels: labels, 
      datasets: [ 
      { data: data, label: "Expenses", fill: false 
      ] 
     }, 
     options: { 
      animation: { duration: 0 }, 
      hover: { animationDuration: 0 }, 
      responsiveAnimationDuration: 0 
     } 
     });

出典

2017-11-23 Adi

あなたのコードサンプルは、 '塗りつぶした後、閉じ括弧が欠落しているようです。 – Shiffty

ツールチップセクションのmodeオプションで設定できます。モードをindexに設定するのは、探しているモードです。 mode: 'index'のサンプル以下

new Chart(document.getElementById('mainChart'), { 
    type: 'line', 
    data: { 
     labels: labels, 
     datasets: [ 
     { data: data, label: "Expenses", fill: false } 
     ] 
    }, 
    options: { 
     animation: { duration: 0 }, 
     hover: { animationDuration: 0 }, 
     responsiveAnimationDuration: 0, 
     tooltips: { mode: 'index' }    
    } 
    });

：false`を：

new Chart(document.getElementById('chartJSContainer'), { 
 
     type: 'line', 
 
     data: { 
 
     labels: ["1", "2", "3", "4", "5", "6"], 
 
     datasets: [{ 
 
\t  \t \t data: [7, 11, 5, 8, 3, 7], 
 
      label: "Income", 
 
      fill: false, 
 
      backgroundColor: 'rgb(54, 162, 235)', 
 
      borderColor: 'rgb(54, 162, 235)', 
 
      }, { 
 
\t  \t \t data: [12, 19, 3, 5, 2, 3], 
 
      label: "Expenses", 
 
      fill: false, 
 
      backgroundColor: 'rgb(255, 99, 132)', 
 
      borderColor: 'rgb(255, 99, 132)', 
 
      } 
 
      ] 
 
     }, 
 
     options: { 
 
      animation: { 
 
      duration: 0 
 
      }, 
 
      hover: { 
 
      animationDuration: 0 
 
      }, 
 
      responsiveAnimationDuration: 0, 
 
      tooltips: { 
 
      mode: 'index' 
 
      } 
 
     } 
 
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
 
<body> 
 
    <canvas id="chartJSContainer" width="600" height="400"></canvas> 
 
</body>

出典

2017-11-23 10:59:16 Shiffty

ありがとう、これは働いた。 – Adi

Chart.jsのマルチラベルツールチップ

答えて

関連する問題