ChartJS：映射非数字 Y 和 X

Question

我正在尝试映射非数字 y 和 x，但由于某种原因它不起作用。

例如

xLabels: ["January", "February", "March", "April", "May", "June", "July"],
yLabels: ['Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],

当我尝试改变时：

data: ['Request Added', 'Request Viewed']

和

data: [{x: "January", y: 'Request Added'}, ...] 

图表不显示任何东西

我也尝试使用 scales.yAxis.ticks.callback 来修改和映射数组，但这也没有奏效。

[0: 'Request Added', 1: 'Request Viewed']

编辑：基本上我需要这样的东西

Request Added           x           x
Request Viewed                 x
Request Accepted               x    x
                    January, Feb, March

基本上是一个副本：https : //answers.splunk.com/answers/85938/scatter-plot-with-non-numeric-y-values.html

这也建议映射到一个数组，但 Y-ticks 中的回调没有任何意义..？当我添加labelY : [1,2,3,4,5,6]回调“值”的第三个参数时，它等于[-2-1 0 1 2].

Answer 1

为了对 X 轴和 Y 轴使用类别比例尺，您必须使用值数组的传统数据格式。根据chart.js api docs ...

可以通过将 X 轴更改为线性轴来创建散点线图。要使用散点图，数据必须作为包含 X 和 Y 属性的对象传递

这意味着您只能{x: ' ', y: ' '}在至少 X 轴是线性刻度时才能使用数据格式（但我打赌它仅在 X 轴和 Y 轴都是线性的情况下才有效）。

由于您只能为数据使用一组值，因此您必须至少使用 2 个数据集才能在 X 轴上绘制多个值（就像您要尝试执行的操作）。

这是一个图表配置，可以提供您正在寻找的内容。

var ctx = document.getElementById("canvas").getContext("2d");
var myLine = new Chart(ctx, {
  type: 'line',
  data: {
    xLabels: ["January", "February", "March", "April", "May", "June", "July"],
    yLabels: ['Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
    datasets: [{
      label: "My First dataset",
      data: ['Request Added', 'Request Viewed', 'Request Added'],
      fill: false,
      showLine: false,
      borderColor: chartColors.red,
      backgroundColor: chartColors.red
    }, {
      label: "My First dataset",
      data: [null, 'Request Accepted', 'Request Accepted'],
      fill: false,
      showLine: false,
      borderColor: chartColors.red,
      backgroundColor: chartColors.red
    }]
  },
  options: {
    responsive: true,
    title:{
      display: true,
      text: 'Chart.js - Non Numeric X and Y Axis'
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Month'
        }
      }],
      yAxes: [{
        type: 'category',
        position: 'left',
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Request State'
        },
        ticks: {
          reverse: true
        },
      }]
    }
  }
});

你可以从这个codepen 中看到它的样子。

如果您出于某种原因使用{x: ' ', y: ' '}数据格式，那么您必须将两个比例更改为线性，将您的数据映射到数值，然后使用该ticks.callback属性将您的数字刻度映射回字符串值。

这是一个演示此方法的示例。

var xMap = ["January", "February", "March", "April", "May", "June", "July"];
var yMap = ['Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'];

var mapDataPoint = function(xValue, yValue) {
  return {
    x: xMap.indexOf(xValue),
    y: yMap.indexOf(yValue)
  };
};

var ctx2 = document.getElementById("canvas2").getContext("2d");
var myLine2 = new Chart(ctx2, {
  type: 'line',
  data: {
    datasets: [{
      label: "My First dataset",
      data: [
        mapDataPoint("January", "Request Added"),
        mapDataPoint("February", "Request Viewed"),
        mapDataPoint("February", "Request Accepted"),
        mapDataPoint("March", "Request Added"),
        mapDataPoint("March", "Request Accepted"),
      ],
      fill: false,
      showLine: false,
      borderColor: chartColors.red,
      backgroundColor: chartColors.red
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js - Scatter Chart Mapping X and Y to Non Numeric'
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        scaleLabel: {
          display: true,
          labelString: 'Month'
        },
        ticks: {
          min: 0,
          max: xMap.length - 1,
          callback: function(value) {
            return xMap[value];
          },
        },
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Request State'
        },
        ticks: {
          reverse: true,
          min: 0,
          max: yMap.length - 1,
          callback: function(value) {
            return yMap[value];
          },
        },
      }]
    }
  }
});

你可以在同一个codepen 上看到这个。