ChartJS - 凡例とツールチップオプション

Question

ChartJS v2を初めて使用しています。 私はいくつかのデータセットを持つ簡単な折れ線グラフを作成します。それが示す正しいデータを持っていますが、彼らはキャンバスのうちカラーボックスに合わせ、左に表示されて私は、伝説に問題があり、1行に1つのような -

1：

私は3つの問題を持っています（https://i.stack.imgur.com/c9qBe.png）。

私はCSSでfloat: left;のような伝説をしたいです。

2 - その他の問題はツールチップで、画像は非常に大きくなります。 （https://i.stack.imgur.com/txXCF.png）

私はそれは難しい私はそれを動作させるためには、これを達成するためのオプションを見つけることを試みたが。

3 - y軸の間隔を0.1ではなく1にします。

 var scripts = $(".sending-data"); 
     var datasets = []; 
     var days = []; 

     var counter = 0; 
     scripts.each(function (index, script){ 

      var json = JSON.parse(script.innerHTML); 
      var data = []; 

      for (var i = 0; i<json.DATA.length; i++) { 
       data.push(json.DATA[i][2]); 
       if (counter === 0) 
        days.push(json.DATA[i][1].substr(8, 2)); 
      } 

      var r = Math.floor((Math.random() * 255) + 1); 
      var g = Math.floor((Math.random() * 255) + 1); 
      var b = Math.floor((Math.random() * 255) + 1); 
      var rgbStr = r+ ", " +g + ", " + b; 
      console.log(rgbStr); 


      datasets.push({ 
       label: "## " + $(script).attr("data-send-id"), 
       backgroundColor: 'rgba('+rgbStr+', 0.2)', 
       borderColor: 'rgba('+rgbStr+', 1)', 
       borderWidth: 2, 
       lineTension: 0.1, 
       data: data, 
       fill: false 
      }); 
      counter++; 
     }); 

     var config ={ 
      type: 'line', 
      data: { 
       labels: days, 
       datasets: datasets 
      }, 
      options: { 
       title: { 
        display: true, 
        text: 'Custom Chart Title' 
       }, 
       responsive : true, 
       legend: { 
        fullWidth: false, 
        boxWidth: 50, 
        padding: 40, 
        position: "top", 
        display: true 
       }, 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true, 
          stepSize: 1 
         } 
        }] 
       } 
      } 
     }; 

    var ctx = document.querySelector("##canvas-chart").getContext("2d"); 
    console.log(document.querySelector("##canvas-chart")); 
    var myLine = new Chart(ctx, config); 

いけない心 '##' セレクタ、私が使用しているのcfusion：

ベローは、チャートを作成するために使用されるJSコードです。 あなたからの助け？

--DISCLAIMER-- 私はstepSize: 1を設定するために管理ので、間隔は1です。しかし、まだ（1）の問題があり、事前に（2）

ありがとう！ ハッピープログラミング！

Answer 1

だから、問題はこれです - 私はダムだ。..

笑

データセットラベルは空白の多くを持っていた...ので、私はちょうどすべてを置き換える「」「による」と、それ

ありがとうございました。 乾杯と幸せなプログラミング！