如何在图表JS的Y轴上应用美元符号?

时间:2018-12-27 14:07:20

标签: javascript charts chart.js

我正在处理js图表,我想在Y轴上应用美元符号,我尝试了该选项,但没有用,有人可以帮我吗,这是我的代码

select p.* from
(select manufacturer, MAX(prize) AS maxprize from products GROUP BY manufacturer) AS m
inner join products p
on m.manufacturer = p.manufacturer and m.maxprize = p.prize
order by p.manufacturer, p.name 

1 个答案:

答案 0 :(得分:1)

如果您使用的是Chart.js版本 1.x ,则可以使用scaleLabel键自定义刻度线。

var options = {
   scaleLabel: function(label){return  '$' + label.value}
};

请注意,在创建图表时,应将 options 对象作为第二个参数传递,而不是将其包含在monthsData中。

const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const initialData = [{'x':'Apr', 'y':40},{'x':'July', 'y':70},{'x':'Dec', 'y':120}];

const filledMonths = initialData.map((month) => month.x);
const dataSet = labels.map(month => {
  const indexOfFilledData = filledMonths.indexOf(month);
	if( indexOfFilledData !== -1) return initialData[indexOfFilledData].y;
  return 0;
});

var monthsData = {
    labels: labels,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: dataSet
        }
    ]
};

var options = {
   scaleLabel: function(label){return  '$' + label.value}
};

var ctx = document.getElementById("myChart").getContext("2d");

var chart = new Chart(ctx).Line(monthsData, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="myChart" width="300" height="300"></canvas>