问题

我使用Highcharts和Angular。

我有一个API，它返回一个字符串**taskLbl**，其中包含用逗号连接的名称：`'test1','test2'`

还有一个API，它返回一个字符串**taskNbr**，其中包含用逗号连接的数字：`'1','2'`

我想要发送一个对象到`data: [of series: [{`

我尝试了这段代码：
```lang-ts
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] + '}&#39;'
            ]);
        }
    }
    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".

要解决这个问题，objects应该像这样：

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

意思是名称的值应该有单引号，颜色的值也应该有单引号。

如何获得这种输出的数组，有人可以帮助我创建一个正确的对象并将其发送到Highcharts。

<details>
<summary>英文:</summary>

I use highcharts and angular

I have an api which return a string **taskLbl** of name concatenate with comma  : `&#39;test1&#39;,&#39;test2&#39;`

also an api which return a string **taskNbr** of name concatenate with comma : `&#39;1&#39;,&#39;2&#39;`

I want to send an object to `data: [  of series: [{`


I try with this code :
```lang-ts
public getValue(taskLbl:any,taskNbr:any)
{
    const colors = Highcharts.getOptions().colors;
    var objects =[];

    const arraylbl = taskLbl.split(&#39;,&#39;);
    const arrayNbr = taskNbr.split(&#39;,&#39;);

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

    Highcharts.chart(&#39;container&#39;, this.options);
}

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

first create array from the first array of name and the second array of number and send it to data of HighCharts

but I have two problem :

the first one : objects add duplicate value meaning the result is :

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

and the correct result should be

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

and the second problem that I have this error

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

and to solve the problem the objects should be like this :

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

meaning value of name should have a single quotes same thing with value of color

how to obtain an array with this kind of output.

can someone help me to create a correct object to send it to highcharts

答案1

得分: 0

首先，如果您的 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 的情况）应该是一个包含对象的数组。您的代码将其变成了包含字符串数组的数组。

您必须按以下方式修改双重 for 循环中的代码：

    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]
            });
        }
    }

这应该可以工作，但我不确定这是否完全符合您的要求。我不了解您的数据和上下文，但是在一个饼图中展示所有成对的数据，具有相同名称但不同 y 的相邻片段具有相同颜色，似乎有些不寻常。您可能希望在多层环形图表中表示数据，就像这个示例中的方式，或者可能是一个带有下钻的饼图，就像这个示例中的方式。我暂时不会详细讨论这些，因为在没有能够测试的情况下，很难编写那么多代码，但如果您在 codesandbox 或 stackblitz 中添加一个带有一些数据的工作示例，我或者这个网站上的其他人将会帮助您朝着那个方向前进。

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));

    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]
            });
        }
    }