javascript - Highcharts 使用数组显示每个气泡点的附加信息

标签 javascript arrays highcharts

我正在使用气泡图。我在此图表中代表“想法”。每个气泡都是一个具有 X 值和 Y 值的特定想法。我需要的是每个气泡的工具提示中的“想法名称”作为附加信息。

我已经知道你可以按如下方式执行:

series: [{
     data: [ { x : 1, y : 100, myIdea : 'Idea1' },
             { x : 2, y : 150, myIdea : 'Idea2' },
             { x : 5, y : 170, myIdea : 'Idea3' } ]
  }]

但是问题来了: 我之前使用过这种数组:

dataArray [0][0] = 1; dataArray [0][1] = 100; dataArray [0][2] = 5;
dataArray [1][0] = 2; dataArray [1][1] = 150; dataArray [1][2] = 5;

来自循环。

我的 dataArray 数组看起来像这样:[1,100,5], [2,150,5], ...

我把它赋予了这样的系列:

series: [{
           data: dataArray 
                }]

效果非常好!

如何创建此预期格式的数组:

         data: [ { x : 1, y : 100, myIdea : 'Idea1' },
                 { x : 2, y : 150, myIdea : 'Idea2' },
                 { x : 5, y : 170, myIdea : 'Idea3' } ]

这是否可以与这样的关联数组一起使用:

var myData= {
            "x": "1",
            "y": "100",
            "myIdea": "idea1"
        }

顺便说一句,为气泡图系列传递动态数据的最佳方式是什么?

最佳答案

您可以循环当前的 dataArray 并构建新数组,如下所示:

var oldDataArray = [
    [1, 100, 5],
    [2, 150, 5]
];
var newDataArray = oldDataArray.map(function (row) {
    return {
        x: row[0],
        y: row[1],
        z: row[2]
    };
});

console.log(newDataArray);

关于javascript - Highcharts 使用数组显示每个气泡点的附加信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28619675/

相关文章:

javascript - Highcharts 中选定列的不同边框

R highcharter()全局千位分隔符?

javascript - setInterval - 倒计时未按预期工作

javascript - 需要知道哪种是实现构造函数的正确方法

c - 如何将字符串添加到C中的字符串数组

php - 按索引对 stdClass 对象进行排序

java - 将元素向左移动 N 步(挑战)

javascript - 组件 onPress 函数内的渲染按钮显示最后一个 i。 React-Native

javascript - 在 IE8 中将文本旋转 90 度不起作用

javascript - Highcharts on Rails 应用程序每次加载时都会渲染两次