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] 回调的第三个参数 "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 轴是线性刻度时使用数据格式 {x: ' ', y: ' '}（但我敢打赌它只有在 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。

ChartJS：映射非数字 Y 和 X

ChartJS: Mapping Non numeric Y and X

charts

scatter

linechart

scatter-plot

chart.js