Question

我为一个学校项目在chart.js中制作了两个图表，一个条形图和一条线，并希望在每个图表上添加一个标题，但是它不起作用，条形图只会消失。我将标题放在代码的什么位置？我希望标题在两个图表上方。

下面是显示更多详细信息的代码：https://jsfiddle.net/b4d5y01z/1/

      let lineConfig = {

    type: 'line',
    data: {
     labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
            datasets: [{
                label: 'Miljoner ton',
                data: [56.38, 59.3, 61.81, 58.83, 52.32, 66.86],
                backgroundColor:"rgba(0,255,0,0.4)",


      }]

    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }

        }]

      }

    }

  },
  barConfig = {
    type: 'bar',
    data: {
           labels: ['Palmolja', "Sojaolja", 'Solrosolja', 'Rapsolja', 'Jordnöt','Annat'],
      datasets: [{
        label: "Miljoner ton",
          data: [32, 22.4, 8, 13.1, 2.2, 19.7],
           backgroundColor: "rgba(0,255,0,0.4)",
        borderColor: "green", // The main line color
        borderCapStyle: 'square',
        pointBorderColor: "white",
        pointBackgroundColor: "green",
        pointBorderWidth: 1,
        pointHoverRadius: 8,
        pointHoverBackgroundColor: "yellow",
        pointHoverBorderColor: "green",
        pointHoverBorderWidth: 2,
        pointRadius: 4,

      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }

  },

  activeType = 'bar', // we'll start with a bar chart.
  myChart;

function init(config) {
  // create a new chart with the supplied config.
  myChart = new Chart(document.getElementById('chart'), config);
}

Answer 1

用以下内容替换选项

 options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    },
    title: {
        display: true,
        text: 'Custom Chart Title'
    }

  },

演示https://jsfiddle.net/wkt0bfxp/

Answer 2

Try This:
let lineConfig = {

    type: 'line',
    data: {
      labels: ['q', 'w', 'e', 'r', 't', 'y'],
      datasets: [{
        data: [6, 5, 4, 3, 2, 1]
      }]
    },
    options: {
        title:{
                  display: true,
            text: "My Second Chart"              
        },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }

    }
  },
  barConfig = {
    type: 'bar',
    data: {
      labels: ['a', 's', 'd', 'f', 'g', 'h'],
      datasets: [{
        data: [10, 20, 30, 40, 50, 60]
      }]
    },
    options: {
    title:{
                  display: true,
            text: "My First Chart"              
        },    
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  },

Answer 3

尝试使用charty.live，它为开发人员提供了无需一行代码即可创建图表的优势。

标题（chart.js）放在哪里？

3 个答案: