格式chart.js之数据元是货币

Question

我发现，您可以通过一个快速的JavaScript回调函数

callback: function(value, index, values) { 
    if (parseInt(value) >= 1000) { 
     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    } else { 
     return '$' + value; 
    } 
} 
} 

chart.js之的x或y轴格式货币，但这似乎并没有成为case为data:在我的实例中，这是一个保存数值的JavaScript 1D数组，我想在适用的地方添加一个美元符号和逗号。我想在data: values

var barChartData = { 
    labels: labelsarr, 
    datasets: [{ 
     label: 'Amount', 
     backgroundColor: 'rgba(200, 200, 200, 0.75)', 
     borderColor: 'rgb(255, 99, 132)', 
     borderWidth: 1, 
     data: values 
    }] 

}; 

而且JSON阵列中的数据格式 - 这怎么可能与Charts.jS

编辑
这是我如何填充我的JSON阵列添加在这种格式["AAAA",100,10000,2310,24420,30,50000,400000,70000,700,823200,923200,1111]

我想格式化从index[1]开始显示$和货币。这怎么能实现？

第二编辑时间
我尝试添加标题和格式可以将数据点和左轴为货币与下面的语法，但是这不再显示我的网页上的任何东西。

var ctx = document.getElementById('canvas').getContext('2d'); 
var chart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: labelsarr, 
     datasets: [{ 
      label: 'Test', 
      data: values, 
      backgroundColor: 'rgba(0, 119, 204, 0.8)', 
     }] 
    }, 
    options: { 
     responsive: true, 
     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; 
         } 
        } 
       } 
      }] 
     }, 
     legend: { 
      position: 'top', 
     }, 
     title: { 
      display: true, 
      text: '<?php echo $name ?> Test' 
     } 
     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; 
       } 
      } 
     } 
    } 
}); 

Answer 1

这可以使用以下工具提示标签的回调函数来实现......

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; 
     } 
    } 
} 

---

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

var labelsarr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M']; 
 
var values = ["AAAA", 100, 10000, 2310, 24420, 30, 50000, 400000, 70000, 700, 823200, 923200, 1111]; 
 

 
var ctx = document.getElementById('canvas').getContext('2d'); 
 
var chart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
     labels: labelsarr, 
 
     datasets: [{ 
 
     label: 'Amount', 
 
     data: values, 
 
     backgroundColor: 'rgba(0, 119, 204, 0.8)', 
 
     }] 
 
    }, 
 
    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; 
 
      } 
 
     } 
 
     }, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       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.6.0/Chart.min.js"></script> 
 
<canvas id="canvas"></canvas>