Question

我需要用不同的标签集构建2个折线图

var myChart = new Chart(ctx, {
type: 'line',
data: {      
  datasets: [{
    data: [1, 2, 3, 4, 5],       
    labels: [
      'green',
      'yellow',
      'red',
      'purple',
      'blue',
    ]
  }, {
    data: [6, 7, 8],
    labels: [
      'a',
      'b',
      'c'
    ],
  }, ]
},
options: {
  responsive: true,
  legend: {
    display: false,
  },
}

}）;

我该怎么做？

Answer 1

好的，这可以为您提供帮助。现在，我用四个具有不同计数的不同数据制作了不同的折线图。在这里，我做了三个标签数组，并随机附加到滴答回调函数。您可以选择任何一个合适的，但要确保更大的atrray lenth来输入数据：{标签：label1}。检查链接enter link description here

var ctx = document.getElementById("myChart");

var label1 = ["aa", "bb", "cc", "dd", "ee", "ff", "gg"];
var label2 = ["1900", "1950", "1999", "2050"];
var label3 = ["AA", "BB", "CC", "DD", "EE"];

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: label1,
    datasets: [{
      label: "Europe",
      type: "line",
      borderColor: "#8e5ea2",
      data: [408, 547, 675, 934],
      fill: false
    }, {
      label: "Africa",
      type: "line",
      borderColor: "magenta",
      data: [133, 221, 783, 2478, 1900, 1200],
      fill: false
    }, {
      label: "Europe",
      type: "line",
      borderColor: "green",
      data: [408, 547, 675, 734, 200],
      fill: false
    }, {
      label: "Africa",
      type: "line",
      borderColor: "red",
      //backgroundColorHover: "#3e95cd",
      data: [133, 221, 783, 2478],
      fill: false
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Population growth (millions): Europe & Africa'
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          // Include a dollar sign in the ticks
          callback: function(value, index, values) {
            if (label3[index] === undefined) {
              label3[index] = "no data ";
            }
            if (label2[index] === undefined) {
              label2[index] = "no data ";
            }
            return "l3 " + label3[index] + "l2 " + label2[index] + ' $' + value;
          }
        }
      }]
    }
  }
});

Answer 2

//use following code that might helpful
 var ctx = $("#myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
    datasets: [{ 
        data: [86,114,106,106,107,111,133,221,783,2478],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,502,635,809,947,1402,3700,5267],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,190,203,276,408,547,675,734],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [40,20,10,16,24,38,74,167,508,784],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [6,3,2,2,7,26,82,172,312,433],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    }
  }
});

Answer 3

我认为您提到的这个标签和标签的数据和计数不同

// here is link https://codepen.io/hiren65/pen/ydMZaJ 
var ctx = $("#myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {      
      datasets: [{
        data: [1, 2, 6, 11, 5], 
        type: "line",
        borderColor: "red",
        labels: [
          'green',
          'yellow',
          'red',
          'purple',
          'blue',
        ]
      }, {
        data: [6, 7, 8],
        type: "line",
        borderColor: "#123ea2",
        labels: [
          'a',
          'b',
          'c'
        ],
      },  {
        data: [6, 3, 8,10,11,4],
        type: "line",
        borderColor: "#6cc",
        labels: [
          'a1',
          'b1',
          'c1',
          'e1'
        ],
      },]
    },
    options: {
      responsive: true,
      legend: {
        display: true,
      },
    }
  });

Chart.js 2个折线图，带有单独的数据集标签

3 个答案: