ChartJS未显示标题

6jjcrrmo  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(177)

ChartJS没有显示任何标题。我在选项和插件中添加了标题,我甚至尝试添加一些边距,因为它可能被布局隐藏了,但没有任何效果。我使用红色节点启动图形 Jmeter 板。我添加了一些CSS到 Jmeter 板,但没有直接链接到标题。有什么想法吗?

<script>

var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');
var linecolors = ['#009900','#889900','#755800']

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Difference between temp ext and temp in',
                color:"#000000"
            }
        },

        scales: {
            yAxes: [
                {
                    gridLines :{color:"#ffffff"},
                    id: 'left-y-axis',
                    type: 'linear',
                    position: 'left',
                    ticks: {
                        fontColor: linecolors[0]
                    }
                },
                {
                    gridLines :{zeroLineColor:"#ffffff",color:"#000000",lineWidth:0.1},
                    id: 'right-y-axis',
                    type: 'linear',
                    position: 'right',
                    ticks: {
                        fontColor:linecolors[1]
                    }
                }
            ],
            xAxes: [
                {
                    gridLines :{zeroLineColor:"#000000",color:"#000000",lineWidth:0.1},
                    type: 'time',
                    distribution: 'series',
                    ticks: {
                        color:'#000000'
                    }
                }
            ]
        }

    },
    // The data for our dataset
    data: {
        labels: [],

        datasets: [
            {
                label: 'First',

                backgroundColor: linecolors[0],
                borderColor: linecolors[0],
                data: {{{payload.first}}},
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 3,
                radius:0,

            },
            {
                label: 'Second',

                backgroundColor: linecolors[1],
                borderColor: linecolors[1],
                data: {{{payload.second}}},
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 3,
                radius:0,

            },
            {
                label: 'Third',

                backgroundColor: linecolors[2],
                borderColor: linecolors[2],
                data: {{{payload.third}}},
                yAxisID: 'right-y-axis',
                steppedLine: false,
                fill: false,
                borderWidth: 3,
                radius:0,

            }
        ]
    },

});

</script>

8e2ybdfx

8e2ybdfx1#

您需要在选项的根目录中设置标题,而不是在插件名称空间中:
第一个

相关问题