JQuery未習熟の者です。
Chart.js 2.3.0を利用して棒グラフと折れ線グラフを作成したのですが、何点か思い通りいかない点があって悩んでいます。

【やりたい事】
棒・折れ線グラフ共に、グラフ上部中央のラベルを非表示若しくは削除したい。(”年間売上比率”)（転換率）
単純にラベル部分を消しても四角と『undefined』が表示されてしまう。

棒グラフの『start』以前と以後の色分けをしているのですが、折れ線グラフも同様に『start』以前と以後の色分けをしたい。
backgroundColorを棒グラフと同様に指定しても最初のカラーが全てに適用されてしまう。

両グラフともツールチップを常時表示したままにしたい。
(可能であればアニメーション終了時に表示開始したい)

解決策をご存知の方がいらっしゃいましたら何卒ご教授お願い致します。

2017/11/08
・進捗状況
ツールチップ常時表示、線グラフの色分け、ラベルの非表示が解決いたしました。
ただ、線グラフ"After 1 year"以降のツールチップ内のデータが"undefined％"と表示されてしまいます。
あと、ツールチップ内のラベル名が重複してしまっているので１つに絞りたいと考えています。
重ねてのお願いで恐縮ですが、ご教示頂けますと幸いです。

<script>
    //ツールチップ常時表示
Chart.pluginService.register({
  beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {
        // create an array of tooltips
        // we can't use the chart tooltip because there is only one tooltip per chart
        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function (dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector]
                }, chart));
            });
        });

        // turn off normal tooltips
        chart.options.tooltips.enabled = false;
    }
},
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
        // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
        if (!chart.allTooltipsOnce) {
            if (easing !== 1)
                return;
            chart.allTooltipsOnce = true;
        }

        // turn on tooltips
        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
            tooltip.initialize();
            tooltip.update();
            // we don't actually need this since we are not animating tooltips
            tooltip.pivot();
            tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
    }
  }
});

//棒グラフ
var ctx = document.getElementById("myBarChart1");
var myBarChart = new Chart(ctx, {
  //グラフの種類
  type: 'bar',
  //データの設定
  data: {
    //データ項目のラベル
    labels: ["Before 3 years","Before 2 years","Before 1 year","Start", "After 1 year", "After 2 years", "After 3 years"],
    //データセット
    datasets: [{
      label: "年間売上比率",
      backgroundColor: ["rgba(75,192,192,0.6)","rgba(75,192,192,0.6)","rgba(75,192,192,0.6)","rgba(75,192,192,0.6)", "rgba(75,192,192,1)", "rgba(75,192,192,1)", "rgba(75,192,192,1)"],
      //グラフのデータ
      data: [0.7,0.8,0.7,1, 2.1, 8.1, 10.1]
    }

]
  },
  //オプションの設定
  options: {
	    showAllTooltips: true,
        animation: {
            duration: 8000,
    },
	  	legend: {
            display: false,
        },
    //軸の設定
    scales: {
          //縦軸の設定
          yAxes: [{
          display: true,
          stacked: false,
          gridLines: {
            display: false
          }
		  }],
		  xAxes: [{
          display: true,
          stacked: false,
          gridLines: {
          display: false
          }
        }]
		},
      tooltips: {
        callbacks: {
          label: function (tooltipItem, data) {
            return data.labels[tooltipItem.index]
              + ": "
              + data.datasets[0].data[tooltipItem.index]
              + " 倍"; 
          }
        }
      }



  }
});

</script>


</div>


<canvas id="myLineChart" width="800" height="400"></canvas>

<script>
//折れ線グラフ
var ctx = document.getElementById("myLineChart");
var myLineChart = new Chart(ctx, {
  //グラフの種類
  type: 'line',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["Before 3 years","Before 2 years","Before 1 year","Start", "After 1 year", "After 2 years", "After 3 years"],
      //データセット
      datasets: [{
		  // Start以前
          label: "転換率",
          borderWidth: 3,
          backgroundColor: "rgba(75,192,192,0.4)",
          borderColor: "rgba(75,192,192,0.6)",
		  pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(75,192,192,0.6)",
          pointRadius: 8,
		  pointBorderWidth: 5,
          pointHoverRadius: 10,
		  pointHitRadius: 5,
		  pointStyle: "circle",
          pointHoverBackgroundColor: "rgba(75,192,192,0.6)",
          pointHoverBorderColor: "#fff",
          pointHitRadius: 5,
          //グラフのデータ
          data: [1.06,1.37,1.23,1.49]
      },
	   {  // Start以前
          label: "転換率",
          borderWidth: 3,
          backgroundColor: "rgba(75,192,192,0.8)",
          borderColor: "rgba(75,192,192,1)",
		  pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(75,192,192,0.8)",
          pointRadius: 8,
		  pointBorderWidth: 5,
          pointHoverRadius: 10,
		  pointHitRadius: 5,
		  pointStyle: "circle",
          pointHoverBackgroundColor: "rgba(75,192,192,1)",
          pointHoverBorderColor: "#fff",
          pointHitRadius: 5,
          //グラフのデータ
          data: [,,, 1.49, 2.09, 3.27, 3.31]
      }
	  
	  ]
  },
  //オプションの設定
  options: {
	    showAllTooltips: true,
        animation: {
            duration: 8000
    },
	    legend: {
            display: false
        },
		
	      tooltips: {
        callbacks: {
          label: function (tooltipItem, data) {
            return data.labels[tooltipItem.index]
              + ": "
              + data.datasets[0].data[tooltipItem.index]
              + " ％"; //ここで単位を付けます
          }
        }
      },
      scales: {
          //縦軸の設定
          yAxes: [{
          display: true,
          stacked: false,
          gridLines: {
            display: false
          }
		  }],
		  xAxes: [{
          display: true,
          stacked: false,
          gridLines: {
          display: false
          }
        }],
              ticks: {
                  //最小値を0にする
                  beginAtZero: true
              }
      }
  }
});
</script>

行動規範の内容に同意します

回答2件

ベストアンサー

折れ線グラフのbackgroundColorの色分け

データセットを分けないとできなさそうですね。

js
1    datasets: [
2      // Start以前
3      {
4        backgroundColor: "rgba(75,192,192,0.4)",
5        data: [1.06,1.37,1.23,1.49]
6      },
7      // Start以降
8      {
9        backgroundColor: "rgba(75,192,192,1)",
10        data: [,,, 1.49, 2.09, 3.27, 3.31]
11      },
12    ]

ツールチップの常時表示

Chart.js 2.3.0あたりのバージョンならばChart.js v2: How to make tooltips always appear on pie chart?のコードで実現できます。

stackoverflowのコードを引用します。
これはnew Chart(...)よりも前に記述しておかないと効果ありません。

js
1Chart.pluginService.register({
2  beforeRender: function (chart) {
3    if (chart.config.options.showAllTooltips) {
4        // create an array of tooltips
5        // we can't use the chart tooltip because there is only one tooltip per chart
6        chart.pluginTooltips = [];
7        chart.config.data.datasets.forEach(function (dataset, i) {
8            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
9                chart.pluginTooltips.push(new Chart.Tooltip({
10                    _chart: chart.chart,
11                    _chartInstance: chart,
12                    _data: chart.data,
13                    _options: chart.options.tooltips,
14                    _active: [sector]
15                }, chart));
16            });
17        });
18
19        // turn off normal tooltips
20        chart.options.tooltips.enabled = false;
21    }
22},
23  afterDraw: function (chart, easing) {
24    if (chart.config.options.showAllTooltips) {
25        // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
26        if (!chart.allTooltipsOnce) {
27            if (easing !== 1)
28                return;
29            chart.allTooltipsOnce = true;
30        }
31
32        // turn on tooltips
33        chart.options.tooltips.enabled = true;
34        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
35            tooltip.initialize();
36            tooltip.update();
37            // we don't actually need this since we are not animating tooltips
38            tooltip.pivot();
39            tooltip.transition(easing).draw();
40        });
41        chart.options.tooltips.enabled = false;
42    }
43  }
44});

ツールチップを常に出しておきたいチャートでは、optionsにshowAllTooltips: trueを設定します。

js
1  options: {
2    showAllTooltips: true,
3  },

ツールチップ内容のカスタマイズ

タイトルなし、ラベルのみ

js
1tooltips: {
2  callbacks: {
3    title: function(tooltipItems, data) {return ""},
4    label: function (tooltipItem, data) {
5      return data.labels[tooltipItem.index]
6        + ": "
7        + data.datasets[0].data[tooltipItem.index]
8        + " ％";
9    }
10  }
11},

タイトルとラベルの2行

js
1tooltips: {
2  callbacks: {
3    label: function (tooltipItem, data) {
4      return data.datasets[0].data[tooltipItem.index] + " ％";
5    }
6  }
7},

ツールチップのundefined表示について

これは色分けを実現するためにデータセットを分割したので、ツールチップのラベル表示のコードも変更しないといけません。
Start以前と以降で取得するデータを変える必要があります。
とりあえずundefinedだったら2番目のデータセットの値を表示に使うコードにしてみました。

js
1tooltips: {
2  callbacks: {
3    label: function (tooltipItem, data) {
4      return (data.datasets[0].data[tooltipItem.index] || data.datasets[1].data[tooltipItem.index]) + " ％";
5    }
6  }
7},

投稿2017/11/07 06:16

編集2017/11/08 03:53

shimitei

総合スコア801

stellanova

2017/11/08 01:45

shimitei様線グラフの色分けの件、無事解決いたしました。ただ、"After 1 year"以降のツールチップ内の表示データが"undefined％"となってしまい、貼って頂いた画像のように表示されません。もし、解決策をご存知でしたらご教示ください。あと、もし可能であれば貼って頂いた画像のようにツールチップ内のラベル名を重複させないようにする方法がありましたら併せてご教示頂けますと幸いです。厚かましいお願いですが、どうか宜しくお願い致します。