javascript - Chart.js 图表格式 - 图例、Y 轴和标题

Question

已解决

解决方案:将 axis 的拼写更改为 axes

我刚刚开始使用 Chart.js 作为 Python Plot.ly 库的替代品。 到目前为止，我已经能够按照我想要的方式格式化图表，但仍然有一些细微差别我无法解决。

首先是我无法找到在 Y 轴值之前添加 $ 的任何解决方案。 这是我的图表，后面是图表的代码:

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

正如您所见，我只想在 Y 轴数据值之前添加一个 $ 。我尝试的最后一个解决方案也将数据分解了 1000 秒。

附加:

我遇到的接下来的几个问题都非常小，这就是为什么我选择将它们包含在这里。

首先，我想要一种将标题集中在图表本身上的方法，而不是集中在整个图表+图例项上。

其次，我想在图例的左侧添加一些空间，以便将其与图表进一步分开。

最后，我的 Y 轴标题将不会显示。我希望在测试时将其显示在此处，以防将来需要它。 通过将 axis 的拼写更改为 axes...subtle

解决了此问题

Answer 1

将 axis 的拼写更改为 axes