javascript - 设置 Chart.js 图表格式

Question

美好的一天 - 我有一个图表正在我的页面上显示，它显示完美，我只需要对其进行两个小的自定义，并且在我的生活中，每当我对图表进行语法更改时，不会更长的显示。我想要

1) Remove the Percentages from the right side
2) On the line chart have the "hover value" display as a number NOT a percent

这是我当前拥有的语法 - 应该如何编辑它才能适应这些更改？

    <script>
var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labelsarr,
        datasets: [{
                type: 'line',
                fill: false,
                label: 'Metric 1',
                backgroundColor: 'rgba(255,0,0,1)',
                borderColor: 'rgba(255,0,0,1)',
                data: val1,
                yAxisID: 'y-axis-1'
            }, {
                label: 'Metric 2,
                backgroundColor: 'rgba(0, 129, 214, 0.8)',
                data: val2
            }]
    },
    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>

Answer 1

Remove the Percentages from the right side

从第一个数据集中删除 yAxisID: 'y-axis-1' 以及 yAxes 数组中的第二个对象..

{
   id: 'y-axis-1',
   position: 'right',
   ticks: {
      beginAtZero: true,
      callback: function(value, index, values) {
         return value + '%';
      }
   }
}

On the line chart have the "hover value" display as a number NOT a percent

替换这行代码(在工具提示标签回调中):

return xLabel + ': ' + yLabel + '%';

具有以下内容:

return xLabel + ': ' + yLabel;

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

var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar'], //labelsarr,
      datasets: [{
         type: 'line',
         fill: false,
         label: 'Metric 1',
         backgroundColor: 'rgba(255,0,0,1)',
         borderColor: 'rgba(255,0,0,1)',
         data: [3, 2, 4], //val1
      }, {
         label: 'Metric 2',
         backgroundColor: 'rgba(0, 129, 214, 0.8)',
         data: [50, 30, 40], //val2
      }]
   },
   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;
                  }
               }
            }
         }]
      }
   }
});

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