Datalabels 插件 chartjs 显示“[object]”而不是值

Question

我正在从 app.js 文件传递对象并将其字符串化，但它在数据标签中无法正常工作，并显示 [如图所示的对象

这是我的代码：[它在 ejs 中，但与 js 几乎相同，除了将变量传递为 <%-variable%>，而不是 ${}]

app.js

let bubbleData=[];

let dataObj = {
                "pastObservation": [
                                {
                                    "value": "400",
                                    "observation_time": "2021-08-12"
                                },
                                {
                                    "value": "800",
                                    "observation_time": "2021-08-13"
                                },
                                {
                                    "value": "13",
                                    "observation_time": "2021-08-11"
                                },
                                {
                                    "value": "370",
                                    "observation_time": "2021-08-15"
                                }
};

//parsing data from observation time, and value, and pushing them in array

dataObj.pastObservation.map( value => { console.log( value.value, value.observation_time ); let object={ "x": value.value, "y": JSON.stringify( Date.parse( value.observation_time ) ) }; bubbleData.push( object ); } );


app.get( '/one', function ( req, res ) {
    res.render( 'chartOne', { bubbleData: bubbleData } );
} );

我的 ejs 文件，虽然我正在对传递的标签进行字符串化，但 datalabels 插件仍然将它们作为对象，而不是 strigyfied 值:

<canvas id="LineChart" height="100"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"
    integrity="sha512-asxKqQghC1oBShyhiBwA+YgotaSYKxGP1rcSYTDrB0U6DxwlJjU59B67U8+5/++uFjcuVM8Hh5cokLjZlhm3Vg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

<script>
    var ctx=document.getElementById( 'LineChart' );
    var myChart=new Chart( ctx, {
        type: 'bubble',
        data: {
            datasets: [ {
                label: 'First Dataset',
                data: <%- JSON.stringify( bubbleData )%>,
                backgroundColor: 'rgb(255, 99, 132)',
                radius: 15,
            } ],
        },
        plugins: [ ChartDataLabels ],
        options: {
            plugins: {
                datalabels: {
                    color: 'black',
                    font: {
                        weight: 'bold'
                    },
                },
            },
            scales:
            {
                y: {
                    ticks: { // return data in date format, instead of numeric as date parsed
                        callback: ( value ) => { return new Date( value).toLocaleDateString( "en-US", { day: "2-digit", month: "short" } ); }

                    }
                }
            },
        },
    } );

Answer 1

我能够解决这个问题，而不是显示整个值，在当前情况下它是一个对象，我不得不在插件选项中使用格式化程序和回调函数获取 x 的值。

options: {
            plugins: {
                datalabels: {
                    formatter: ( val ) => {
                        return val.x
                    },
                 }
             }
    }

Datalabels 插件 chartjs 显示“[object]”而不是值

Datalabels plugin chartjs showing '[object]' instead of value

javascript

node.js

chart.js

react-chartjs