chart js通过点而不是线绘制折线图

lnlaulya 于 2021-09-23 发布在 Java

关注(0)|答案(4)|浏览(258)

如果标题有误导性，我很抱歉，我会尽量弄清楚我的意思。
我有这样一个对象列表：

[ 
  { 'a': 10, 'b': 5, 'c': 15},
  { 'a': 12, 'b': 3, 'c': 15},
  { 'a': 14, 'b': 6, 'c': 15},
  { 'a': 8, 'b': 2, 'c': 15},
]

每个对象表示每条线随时间变化的y值 a, b, c . 通过阅读文档，我了解到要创建多行图表，我需要以下内容：

{
  label: 'a',
  data: [10, 12, 14, 8],
},
{
  label: 'b',
  data: [5, 3, 6, 2],
},
{
  label: 'c',
  data: [15, 15, 15, 15],
}

我是否必须将每个对象“解包”到列表中，或者我可以做其他事情？

JavaScript chart.js

来源：https://stackoverflow.com/questions/68319886/chart-js-draw-line-chart-by-points-instead-of-by-lines

4条答案

按热度按时间

fnvucqvd1#

如果还提供了数据对象的x值，则只需将数据数组按原样传递给数据字段，并指定每个数据集chart.js获取y值所需的属性，如下所示：

const data = [{
    x: 'Red',
    'a': 10,
    'b': 5,
    'c': 15
  },
  {
    x: 'Blue',
    'a': 12,
    'b': 3,
    'c': 15
  },
  {
    x: 'Yellow',
    'a': 14,
    'b': 6,
    'c': 15
  },
  {
    x: 'Green',
    'a': 8,
    'b': 2,
    'c': 15
  },
]

const options = {
  type: 'line',
  data: {
    datasets: [{
        label: 'a',
        data: data,
        parsing: {
          yAxisKey: 'a'
        },
        borderColor: 'green'
      },
      {
        label: 'b',
        data: data,
        parsing: {
          yAxisKey: 'b'
        },
        borderColor: 'blue'
      },
      {
        label: 'c',
        data: data,
        parsing: {
          yAxisKey: 'c'
        },
        borderColor: 'red'
      }
    ]
  },
  options: {
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

您可以在此处阅读有关chart.js数据结构的更多信息：https://www.chartjs.org/docs/master/general/data-structures.html#data-结构

赞(0）回复(0）举报 2021-09-23

cbeh67ev2#

1）我想这是一种分离每个元素并返回数组的简单方法

let mydata = [ 
              { 'a': 10, 'b': 5, 'c': 15},
              { 'a': 12, 'b': 3, 'c': 15},
              { 'a': 14, 'b': 6, 'c': 15},
              { 'a': 8, 'b': 2, 'c': 15}
             ];

function split_(index){
  let a = [];
  mydata.forEach(e => a.push(e[index]));
  return a;
}

console.log(split_('a'));
console.log(split_('b'));
console.log(split_('c'));

然后，按如下方式调用数组：

{
   label: 'a',
   data: split_('a'),
},
{
   label: 'b',
   data: split_('b'),
},
{
   label: 'c',
   data: split_('c'),
}

2）一种更复杂的返回对象的方法，可以直接附加到图表中

let mydata = [
              { 'a': 10, 'b': 5, 'c': 15},
              { 'a': 12, 'b': 3, 'c': 15},
              { 'a': 14, 'b': 6, 'c': 15},
              { 'a': 8, 'b': 2, 'c': 15}
             ];

function transform_(){
  let obj = [];
  Object.keys(mydata[0]).forEach(function t(key) {
      let a = [];
      mydata.forEach(e => a.push(e[key]));
      obj.push({ 
          label: key,
          data: a 
      });
  });
  return obj;
}

console.log(transform_());

编辑：第二个答案仅适用于矩形对象，如您在示例中放置的矩形对象。如果对象在每个索引中具有不同的长度，它将无法工作。例子：
这会管用的

[
            { 'a': 10, 'b': 5, 'c': 15},
            { 'a': 12, 'b': 3, 'c': 15},
            { 'a': 14, 'b': 6, 'c': 15},
            { 'a': 8, 'b': 2, 'c': 15}
           ];

这不起作用（“d”元素不会附加到图表中）

[
            { 'a': 10, 'b': 5, 'c': 15},
            { 'a': 12, 'b': 3, 'c': 15, 'd': 4},    //notice this 'd' element
            { 'a': 14, 'b': 6, 'c': 15},
            { 'a': 8, 'b': 2, 'c': 15}
           ];

祝你好运

赞(0）回复(0）举报 2021-09-23

8e2ybdfx3#

您可能需要将原始数据转换为您概述的兼容数据结构。
可以使用二维缩减器缩减数据。创建组后，将它们Map为条目。这将处理数据中未定义的键值对或孔。例如，如果第二个项目没有 b 值，然后是 b 小组将有一个 null 作为索引 1 .

const safePush = (arr, value, index) => {
  if (arr == null) { arr = []; }
  arr[index] = value;
  return arr;
};

const transformData = (rawData) =>
  Object.entries(rawData.reduce((acc, item, index) =>
    Object.entries(item).reduce((acc1, [key, value]) =>
      ({ ...acc1, [key]: safePush(acc1[key], value, index) }), acc), {}))
    .map(([ label, data ]) => ({ label, data }));

const data = [ 
  { 'a': 10 , 'b': 5 , 'c': 15 },
  { 'a': 12 , 'b': 3 , 'c': 15 },
  { 'a': 14 , 'b': 6 , 'c': 15 },
  { 'a': 8  , 'b': 2 , 'c': 15 },
];

const transformed = transformData(data);

console.log(transformed);

.as-console-wrapper { top: 0; max-height: 100% !important; }

赞(0）回复(0）举报 2021-09-23

beq87vna4#

是的，您必须将数据分组如下：

var data = [
    { 'a': 10, 'b': 5, 'c': 15},
    { 'a': 12, 'b': 3, 'c': 15},
    { 'a': 14, 'b': 6, 'c': 15},
    { 'a': 8, 'b': 2, 'c': 15},
  ],
  result = data.reduce(function (r, each) {
    for (let key in each) {
      if (r[key]) {
        r[key].push(each[key])
      } else {
        r[key] = [each[key]]
      }
    }

    return r;
  }, {});

console.log(result);

然后您可以按照这里的指示操作

赞(0）回复(0）举报 2021-09-23

我来回答

chart js通过点而不是线绘制折线图

4条答案

相关问题

热门标签

最新问答