ChartJS - 傳說和工具提示選項

這是我第一次使用ChartJS v2。我用幾個數據集創建一個簡單的折線圖。ChartJS - 傳說和工具提示選項

我有3個問題：

1 - 它已表現出正確的數據，但我有傳說中的問題，因爲他們似乎只剩下顏色框而出畫布對齊，像每行一個在圖像下方（https://i.stack.imgur.com/c9qBe.png）。

我要像在CSS float: left;的傳說。

2 - 其他問題是工具提示，它們非常大..如下圖所示。（https://i.stack.imgur.com/txXCF.png）

我試圖找到實現這一目標的選擇，但我很難使其工作。

3 - 我希望y軸的間隔爲1而不是0.1。

貝婁是用於創建圖表的JS代碼：

 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。你們有什麼幫助嗎？

--DISCLAIMER-- 我設法設置stepSize: 1這樣的時間間隔爲1，但仍然有問題（1）和（2）提前

謝謝！快樂編程！

來源

2017-08-23 Miguel Pinto

這兩個圖像似乎不工作.. – SilentCoder

我添加圖像鏈接imgur @SilentCoder –

很抱歉，我無法查看圖像。那麼你的工具提示中的字體大小呢？ – SilentCoder

所以，問題是這樣的 - 我是啞巴 ..

哈哈哈

數據集的標籤有很多空白的......所以我只是更換了所有「」被「」，它顯示正確..

感謝你們所有人。歡呼和快樂編程！

來源

2017-08-23 12:09:05

ChartJS - 傳說和工具提示選項

回答

相關問題