Chart.JS不格式化Y軸-1正確

我正在利用以下語法將顯示點格式化爲$和％。所以我想。我的問題是兩個顯示點都顯示爲$，這幾乎就像y軸-1沒有被拾起。我在語法中丟失了一個閉括號還是一些愚蠢的東西？什麼導致％不被應用到線圖上？Chart.JS不格式化Y軸-1正確

var labelsarr = ["Richard 14", "Richard 15", "Jason 14", "Jason 15", "Jack 14", "Jack 15"]; 
var ctx = document.getElementById('canvas1').getContext('2d'); 
var chart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: labelsarr, 
     datasets: [{ 
       type: 'line', 
       fill: false, 
       label: 'Sale Total', 
       backgroundColor: 'rgba(255,0,0,1)', 
       borderColor: 'rgba(255,0,0,1)', 
       data: values1, 
       yAxisID: 'y-axis-1' 
      }, { 
       label: 'Sale Total', 
       backgroundColor: 'rgba(0, 129, 214, 0.8)', 
       data: values 
      }] 
    }, 
    options: { 
     tooltips: { 
      callbacks: { 
       label: function (t, d) { 
        var xLabel = d.datasets[t.datasetIndex].label; 
        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
        return xLabel + ': ' + yLabel; 
       } 
      } 
     }, 
     legend: { 
      display: false, 
      position: 'top', 
     }, 
     scales: { 
      yAxes: [{ 
        ticks: { 
         beginAtZero: true, 
         callback: function (value, index, values) { 
          if (parseInt(value) >= 1000) { 
           return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
          } else { 
           return '$' + value; 
          } 
         } 
        } 
       }, { 
        id: 'y-axis-1', 
        position: 'right', 
        ticks: { 
         beginAtZero: true, 
         callback: function (value, index, values) { 
          return value + '%'; 
         } 
        } 
       }] 
     } 
    } 
});

來源

2017-08-10 BellHopByDayAmetuerCoderByNigh

你在說什麼，'％'符號不要被顯示在正確的y軸，或在懸停在點上的工具提示？ –

工具提示懸停點數。它顯示$符號。 – BellHopByDayAmetuerCoderByNigh

這是因爲，您正在爲兩個數據集返回相同的工具提示標籤。

你還是使用下面的提示回調函數：

callbacks: { 
    label: function(t, d) { 
     if (t.datasetIndex === 0) { 
     var xLabel = d.datasets[t.datasetIndex].label; 
     var yLabel = t.yLabel; 
     return xLabel + ': ' + yLabel + '%'; 
     } else { 
     var xLabel = d.datasets[t.datasetIndex].label; 
     var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
     return xLabel + ': ' + yLabel; 
     } 
    } 
}

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

var labelsarr = ["Richard 14", "Richard 15", "Jason 14", "Jason 15", "Jack 14", "Jack 15"]; 
 
var values = [1, 2, 3, 4, 5, 6]; 
 
var values1 = [1, 2, 3, 4, 5, 6]; 
 

 
var ctx = document.getElementById('canvas1').getContext('2d'); 
 
var chart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: labelsarr, 
 
     datasets: [{ 
 
     type: 'line', 
 
     fill: false, 
 
     label: 'Sale Total', 
 
     backgroundColor: 'rgba(255,0,0,1)', 
 
     borderColor: 'rgba(255,0,0,1)', 
 
     data: values1, 
 
     yAxisID: 'y-axis-1' 
 
     }, { 
 
     label: 'Sale Total', 
 
     backgroundColor: 'rgba(0, 129, 214, 0.8)', 
 
     data: values 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
     callbacks: { 
 
      label: function(t, d) { 
 
       if (t.datasetIndex === 0) { 
 
        var xLabel = d.datasets[t.datasetIndex].label; 
 
        var yLabel = t.yLabel; 
 
        return xLabel + ': ' + yLabel + '%'; 
 
       } else { 
 
        var xLabel = d.datasets[t.datasetIndex].label; 
 
        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel; 
 
        return xLabel + ': ' + yLabel; 
 
       } 
 
      } 
 
     } 
 
     }, 
 
     legend: { 
 
     display: false, 
 
     position: 'top', 
 
     }, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true, 
 
       callback: function(value, index, values) { 
 
        if (parseInt(value) >= 1000) { 
 
        return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
        } else { 
 
        return '$' + value; 
 
        } 
 
       } 
 
      } 
 
     }, { 
 
      id: 'y-axis-1', 
 
      position: 'right', 
 
      ticks: { 
 
       beginAtZero: true, 
 
       callback: function(value, index, values) { 
 
        return value + '%'; 
 
       } 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="canvas1"></canvas>

來源

2017-08-10 13:57:10

Chart.JS不格式化Y軸-1正確

回答

相關問題