ChartJS 不显示标题

Question

The ChartJS is not showing any title. ChartJS 没有显示任何标题。 I added the title in option and then plugin, Ieven tried to add some margin because mabe it was hidden by the layout but nothing works.我在选项中添加了标题，然后在插件中添加了标题，我什至尝试添加一些边距，因为它可能被布局隐藏但没有任何效果。 I use node-red to launch the graphic dashboard.我使用 node-red 来启动图形仪表板。 I added some CSS to the dashboard but nothing linked directly to the title.我在仪表板中添加了一些 CSS，但没有直接链接到标题。 Any idea ?任何想法？

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

Answer 1

You need to set the title in the root of the options, not in the plugins namespace:您需要在选项的根目录中设置标题，而不是在插件命名空间中：

 var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { title: { display: true, text: 'Title text' } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> </body>

ChartJS 不显示标题

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-07-11 11:21:00

ChartJS 不显示标题

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-07-11 11:21:00

解决方案1
1 已采纳 2022-07-11 11:21:00