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

时间:2019-05-08 17:11:58

标签: javascript chart.js

我有一个使用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,
    }
});

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

The way datasets are displayed

Chart displayed.

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

1 个答案:

答案 0 :(得分:3)

问题在于该库不知道由谁来处理您提供的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"),然后将minmax设置为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数据值。