Question

我正在使用ChartJS 2.6.0版。而且我对这个“头衔”有些困难。图表的选项。它只是没有在渲染图表上显示。我跟随documentation，并按照描述传递标题：

var options = {
    type: 'line',
    data: data,
    title: {
        display: true,
        text: 'PLEASE DISPLAY FOR HEAVEN\'S SAKE'
    },
    responsive: true,
    bezierCurve: true,
    legend: {
        display: true,
        labels: {
            fontColor: 'rgb(255, 99, 132)'
        }
    },
    pointHitDetectionRadius: 1,
    events: ['click']
}

var canvas = document.getElementById("chartId");
var ctx = canvas.getContext("2d");
var chart = new Chart(ctx, options);

然而，标题根本不会显示。这是一个带有dougnut图表的fiddle，它有同样的问题。我在这里缺少什么？

Answer 1

您需要将title对象包含在options对象中，如

var myChart = new Chart(ctx, {
    type: 'doughnut',
    options: {
        title: {
            display: true,
            text: 'TEST'
        }
    } 
....

以下是所有选项chartjs:title

的完整列表的文档

var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  options: {
    title: {
      display: true,
      text: 'TEST'
    }
  },
  data: {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: bgColor
    }]
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400">
</canvas>

https://jsfiddle.net/unf4exa2/

Answer 2

您的title属性应该位于另一个名为options的属性中。试试这个。

options : {
title: {
        display: true,
        text: 'TITLE HERE'
    }
}

您也可以查看一些示例here。

Answer 3

在您的JSFiddle中，您忘记添加options。

文档中的示例是：

 options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
        },

看到这个小提琴：https://jsfiddle.net/ha19ozqy/90/

Answer 4

请尝试在标题中添加选项对象

https://jsfiddle.net/Jaffreena/ha19ozqy/93/

var data = [2137680, 6282693, 805566, 2568163, 598599, 3189284, 599112, 926340, 5548295, 11847685, 66445];
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var bgColor = ["#878BB6", "#FFEA88", "#FF8153", "#4ACAB4", "#c0504d", "#8064a2", "#772c2a", "#f2ab71", "#2ab881", "#4f81bd", "#2c4d75"];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',

    data: {

        labels: labels,
        datasets: [{
            data: data,
            backgroundColor: bgColor
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
    }
});

Answer 5

您需要将 title 对象包裹在 plugins 对象内，然后将 plugins 包裹在 options 内

var myChart = new Chart(ctx, {
    type: 'doughnut',
    options: {
      plugins:{
         title: {
            display: true,
            text: 'Title'
            }
        }
    }

这肯定会奏效！

ChartJs标题没有显示

5 个答案: