Chart.js 图表格式 - 图例 & Y 轴 & 标题

Question

SOLVED

Solution: Changed the spelling of axis to axes

I have just begun working with Chart.js as an alternative to the Python Plot.ly library. So far I have been able to get the chart formatted the way I would like but there are still a couple of nuances I cant get right.

The first of which is that I cannot get any solution for adding a $ before Y-Axis values. Here is my chart followed by the chart's code:

<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var O1 = [1000,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000];
    var O2 = [3000,6000,5000,3000,8000,6000,4000,7000,8000,0000,3000,1000];

    var mychart = new Chart(ctx, {
        type: 'line',
        options: {
            title:{
                text: 'Test Chart',
                display: true,
                fontStyle: 'bold',
                fontSize: 16,
            },
            legend:{
                position: 'right',
            },
            scales:{
                yAxis:[{
                    scaleLabel:{
                        display: true,
                        labelString: 'Tester',
                    },
                    ticks:{
                        callback: function(value, index, values) {
                            if(parseInt(value) >= 1000){
                                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return '$' + value;
                            }
                        }
                    }
                }]
            },
            tooltips:{
                callbacks: {
                    label: function(tooltipItem, data){
                        var dataLabel = data.labels[tooltipItem.index];
                        var value = ': $ ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
                        if (Chart.helpers.isArray(dataLabel)) {
                            dataLabel = dataLabel.slice();
                            dataLabel[0] += value;
                        } else {
                            dataLabel += value;
                        }
                        return dataLabel1;
                    }
                }
            }
        },
        data: {
            labels: months,
            datasets: [
                {
                label: 'Officer1',
                data: O1,
                fill: false,
                backgroundColor: 'rgba(255, 99, 132)',
                borderColor: 'rgba(255, 99, 132)',
                },
                {
                label: 'Officer2',
                data: O2,
                fill: false,
                backgroundColor: 'rgba(0,0,255)',
                borderColor: 'rgba(0,0,255)',
                }
            ]
        }
    });
</script>

As you may be able to see I would simply like to add a $ before my Y-Axis data values. The last solution I tried also broke the data up by 1000s.

Additional:

The next few issues I've come across are very minor, which is why I chose to include them here.

First I would like a way to center my title over the chart itself, rather than centered over the whole chart+legend item.

Second is I would like to add some space to the left of my legend, as to separate it more from the chart.

Lastly, my Y-Axis title will not display. I would like it to display here while im testing in case I need it in the future. This issue was solved by changing the spelling of axis to axes ...subtle

Answer 1

将axis的拼写更改为axes