Как применить знак доллара по оси Y на графике js? - PullRequest
Новая
       6

Как применить знак доллара по оси Y на графике js?

0 голосов
/ 27 декабря 2018

Я работаю над графиком JS, я хочу применить знак Доллера по оси Y, я пробовал варианты для этого, но он не работает, может кто-нибудь, пожалуйста, помогите мне в этом, вот мой код 

function earning_one_time_purchase() {
        var monthsData = {
            labels: <?php echo $t->one_time_purchase_month_chart; ?>,
            datasets: [
                {
                    fillColor: "<?php echo $graph_color_code; ?>", //"rgba(172,194,132,0.4)",
                    strokeColor: "<?php echo $graph_line_color_code; ?>",
                    pointColor: "#fff",
                    pointStrokeColor: "#9DB86D",
                    data: <?php echo $t->one_time_purchase_amount_chart; ?>
                } 
            ],
        options: {
        scales: {
            yAxes: [{
                ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    alert(value);
                    return '$' + value;
                }
                }
            }]   
            }
        }
        };
        var months = document.getElementById("eChart_1").getContext("2d");
        new Chart(months).Line(monthsData);
    }

1 Ответ

0 голосов
/ 28 декабря 2018

Если вы используете версию 1.x файла Chart.js, вы можете настроить тики с помощью клавиши 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>
...