Chartjs 条形数据集标签未显示答案

【问题标题】：Chartjs bar dataset label not showingChartjs 条形数据集标签未显示
【发布时间】：2018-05-02 14:53:38
【问题描述】：

试图在条形图上比较今年与去年，数据集“今年”和“上一年”的标签未显示。当并排比较多个数据集时，这个东西特别方便，因此非常感谢任何帮助。顺便说一下，我的 chartjs 版本是 2.1.4

  var chartdata = {
    type: 'bar',
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      // labels: month,
      datasets: [
        {
          label: 'this year',
          backgroundColor: '#26B99A',
          data: sold1
        },
        {
          label: 'previous year',
          backgroundColor: '#03586A',
          data: sold2
        }
      ]
    }
  };

【问题讨论】：

如果您仍然需要答案，请查看此主题：stackoverflow.com/questions/24510278/…

标签： chart.js

【解决方案1】：

检查您的sold1 和sold2。

console.log(sold1);
console.log(sold2);

例如这是有效的：

var chartdata = {
    {
        type: 'bar',
        data: {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          // labels: month,
          datasets: [
            {
              label: 'this year',
              backgroundColor: '#26B99A',
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            },
            {
              label: 'previous year',
              backgroundColor: '#03586A',
              data: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
            }
          ]
        }
    }
};



var ctx = document.getElementById('chartContainer').getContext('2d');
new Chart(ctx, chartdata);

JSFiddle https://jsfiddle.net/1davgzmh/1/

【讨论】：

感谢亚历克斯的帮助！再次检查控制台，两个输出似乎都是正确的。：
sold1 输出 (11) ["357508.03", "393790.14", "407346.07", "557704.12", "555916.68", "422659.26", "297766.49", "448256.07", "510020", ". "325525.30", "89214.27"]
sold2 输出 (11) [“409550.01”、“396759.48”、“337295.41”、“404729.91”、“298772.12”、“455665.55”、“411476.19”、“403140.82”、“45221” "390890.12", "512817.69"]
如果 i 到数据之类的数据： [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] 仍然没有标签。很奇怪
检查 JSFiddle，我只能用你发布的部分代码做一个 JSFiddle 工作示例。

【解决方案2】：

将 xAxis 的 autoSkip 设置为 false ：

scales: {
  xAxes: [{
      beginAtZero: true,
      ticks: {
         autoSkip: false
      }
  }]
}

【讨论】：

【解决方案3】：

这对我有用。自己试试

var chartdata = {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [
                {
                    label: 'this year',
                    backgroundColor: '#26B99A',
                    data: sold1
                },
                {
                    label: 'previous year',
                    backgroundColor: '#03586A',
                    data: sold2
                }
            ]
        },
        "options": {
            "legend": {"position": "bottom"},
            "scales": {
                "xAxes": [
                    {
                        "beginAtZero": true,
                        "ticks": {
                            "autoSkip": false
                        }
                    }
                ]
            }
        }
    };

【讨论】：