如何使用带有chart.js的关联数组制作图表？

Question

我有一个使用Laravel的PHP应用程序，我必须将两个数组加入一个图表中。两者均显示每月数量。我可以为文档中的正常用例写一个标签，但是这两行不一定包含相同的月份数，因此我想将每个y轴数字与其特定的月份标签关联起来。

var ctx = document.getElementById('flujomes');
var entregas = @json($ar_entregas);
var reversas = @json($ar_reversas);
console.log(entregas);
console.log(reversas);
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: "Número de entregas",
            data: entregas,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
            ],
            borderWidth: 1
        },
        {
            label: "Número de reversas",
            data: reversas,
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }
    ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        responsive: true,
        maintainAspectRatio: false,
    }
});

但是它没有按我预期的那样工作：

所以chart.js会拾取数据，但它不知道x点实际在哪里。

Answer 1

问题在于该库不知道由谁来处理您提供的x值，只有在使用线性轴（数值数据）的情况下，它才能正确执行此操作选项。

有两种解决方法，

---

选项1-定义一个category轴

由于您知道将在标签上显示的值，因此可以使用type: 'category'来设置它们，因此库知道正确放置点的位置，如以下示例所示：

var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: "Data 1",
      data: [{
        x: '2018-2',
        y: 98
      }, {
        x: '2018-4',
        y: 74
      }, {
        x: '2018-5',
        y: 52
      }],
    }, {
      label: "Data 2",
      data: [{
        x: '2018-3',
        y: 25
      }, {
        x: '2018-5',
        y: 52
      }],
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'category',
        labels: ['2018-2', '2018-3', '2018-4', '2018-5']
      }]
    },
    tooltips: {
      mode: 'x',
      callbacks: {
        title: function(tooltipItems, data) {
          let tI = tooltipItems[0];
          return data.datasets[tI.datasetIndex].data[tI.index].x;
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

选项2-将标签转换为日期

另一种可能的解决方案是将标签从文本转换为Date()的时刻moment("2018-2")，然后将min和max设置为ticks的值，以及显示格式，例如：

xAxes: [{
    type: 'time',
    time: {
        displayFormats: {
            quarter: 'YYYY-MM'
        }
    }
}]

总体而言，这是一个更复杂的解决方案。

---

更新-修复了错误的工具提示标题

如前所述，第一种解决方案将导致当用户将鼠标悬停在某个点上时，工具提示的标题将与x标签不同，这是因为该点带有错误的index值（这是因为index用于返回标签位置。

在尝试解决此问题时，由于Scatter图表产生的结果与我们试图实现的结果类似，因此我锁定了here类型的控制器，但是没有运气，因为在这种情况下，或者标题被忽略或值也错误。

所以我想到的是这样的：

tooltips: {
  mode: 'x', // optional
  callbacks: {
    title: function(tooltipItems, data) {
      let tI = tooltipItems[0];
      return data.datasets[tI.datasetIndex].data[tI.index].x;
    }
  }
}

基本上，它不会获取标签数组中的索引，而是会获得原始的x数据值。