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正确

回答

相关问题