我用highcharts和angular
我有一个API，它返回一个字符串taskLbl的名称与逗号连接：'test1','test2'
还有一个API，它返回一个字符串taskNbr的名称与逗号连接：'1','2'
我想发送一个对象到data: [ of series: [{
我试着用这个代码：

public getValue(taskLbl:any,taskNbr:any)
{
    const colors = Highcharts.getOptions().colors;
    var objects =[];

    const arraylbl = taskLbl.split(',');
    const arrayNbr = taskNbr.split(',');

    for (var i = 0; i < arraylbl.length; i++) {
        for (var j = 0; j < arrayNbr.length; j++) {
            objects.push([
                '{'+ 'name: '+''+arraylbl[i],
                'y:' +arrayNbr[j],
                'color:'+''+colors[i]+'}'
            ]);
        }
    }
    this.fillData(objects);

    Highcharts.chart('container', this.options);
}

/*
 fill fillData
 */
public fillData(objects:any)
{
    this.options = {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: 'stat'
        },
        subtitle: {
            text: ''
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: 'number',
            data: [
                objects
            ]
        }],
    }
}

首先从第一个名称数组和第二个数字数组创建数组，并将其发送到HighCharts的数据
但我有两个问题：
第一个objects添加重复值，表示结果为：

{name: test1,y:1,color:#7cb5ec},
{name: test1,y:1,color:#7cb5ec},
{name: test2,y:2,color:#434348},
{name: test2,y:2,color:#434348}

正确的结果应该是

{name: test1,y:1,color:#7cb5ec},
{name: test2,y:2,color:#434348},

第二个问题是我有这个错误

Error: <rect> attribute x: Expected length, "NaN".

为了解决这个问题，对象应该是这样的：

{name: 'test1',y:1,color:'#7cb5ec'},
{name: 'test2',y:2,color:'#434348'}

这意味着name的值应该有一个单引号与color的值相同
如何获得具有这种输出的数组。
有人可以帮助我创建一个正确的对象发送到highcharts

for (let i = 0; i < arraylbl.length; i++) { for (let j = 0; j < arrayNbr.length; j++) { objects.push({ name: arraylbl[i], y: arrayNbr[j], color: colors[i] }); } }

1条答案

按热度按时间

0lvr5msh1#

首先，如果你的objects变量中有重复项，这肯定是由arraylbl或arrayNbr（或两者）中的重复项引起的。因此，在源处消除重复更有效。你可以实现一个过滤掉重复项的函数：

function unique<T>(a: Array<T>): Array<T>{
  return a.filter((x,i,a)=>a.indexOf(x)===i);
}

并在构建两个数组时应用它：

// .......
    const arraylbl = unique(taskLbl.split(','));
    const arrayNbr = unique(taskNbr.split(',').map(parseFloat));

我还应用了函数parseFloat从字符串表示中提取数值，因为您希望发送到highcharts的objects变量中的y是一个数字。
现在主要的问题是对象数组--在highcharts中，series.data的值（至少对于pie类型）应该是一个 objects 的数组。您的代码使其成为字符串数组的数组。
你必须这样修改双for循环中的代码：

这应该行得通，但我不确定这是不是你想要的。我不知道你的数据和上下文，但是在一个饼图上所有对的完整组合，相邻的切片具有相同的名称，不同的y具有相同的颜色，这似乎是不寻常的。您可能希望在in this example这样的多级圆环图上表示数据，或者可能在this one这样的饼图上表示数据。我还不想深入讨论这些，因为如果没有测试，就不太可能得到正确的代码，但是如果你在codesandbox或stackblitz中添加了一个带有一些数据的工作示例，我或这个网站上的其他人会在这个方向上帮助你。

赞(0）回复(0）举报 2023-05-29

highcharts发送数组到序列数据

1条答案

相关问题

热门标签

最新问答