charts - ChartJS : Mapping Non numeric Y and 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] 回调“values”的第三个参数等于 [-2-1 0 1 2]。

Answer 1

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

Scatter line charts can be created by changing the X axis to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties

这意味着你只能使用数据格式 {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 上看到这个 Action .