使用数组数据渲染 Chart.js 气泡图答案

【问题标题】：Rendering Chart.js Bubble Chart Using Array Data使用数组数据渲染 Chart.js 气泡图
【发布时间】：2017-03-09 10:27:44
【问题描述】：

我从一个 XML 文件中解析了三个数组，详细如下：

["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"]
["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"]
["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"]

假设这些称为arrayX、arrayY 和arrayR。我将如何使用这些在 Chart.js 中呈现气泡图？我有代码在这里创建一个简单的气泡图：

var ctx = document.getElementById("myChart");
                    var myChart = new Chart(ctx, {
                        type: 'bubble',
                        data: {
                            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                            datasets: [
                            {
                                label: 'Gaze Map Month 1',
                                data: [
                                {
                                    x: 23,
                                    y: -10,
                                    r: 10
                                },
                                {
                                    x: -10.713591,
                                    y: -24.425175,
                                    r: 3
                                },
                                {
                                    x: -20.516543,
                                    y: 9.131939,
                                    r: 36
                                },
                                {
                                    x: 27.352751,
                                    y: 7.052970,
                                    r: 19
                                },
                                {
                                    x: -21.090982,
                                    y: -26.059631,
                                    r: 2
                                }

                                ],
                                backgroundColor:"#FF6384",
                                hoverBackgroundColor: "#FF6384",
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero:true,
                                        min: -30,
                                        max: 30  
                                    }
                                }],
                                xAxes: [{
                                    ticks: {
                                        beginAtZero:true,
                                        min: -30,
                                        max: 30
                                    }
                                }]
                            }
                        }
                    });

请注意，如果需要，可以更改数组的格式，以便只使用值。

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

由于您正在动态获取数据，因此只需迭代您的数据并以 chart.js 所需的格式构建一个 chartData 对象。组装好数据后，只需在图表定义中使用它即可。请看下面的例子

var xArray = ["x": "23.561799", "x": "-10.713591", "x": "-20.516543", "x": "27.352751", "x": "-21.090982"];
var yArray = ["y": "-5.777557", "y": "-24.425175", "y": "9.131939", "y": "7.052970", "y": "-26.059631"];
var rArray = ["r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000", "r": "10.000000"];

var chartData = [];

xArray.forEach(function(e, i) {
  chartData.push({
    x: parseFloat(e),
    y: parseFloat(yArray[i]),
    r: parseFloat(rArray[i]),
  });
});

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bubble',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
         label: 'Gaze Map Month 1',
         data: chartData,
         backgroundColor:"#FF6384",
         hoverBackgroundColor: "#FF6384",
      }
    ]
  },
  options: {
     scales: {
       yAxes: [{
         ticks: {
           beginAtZero:true,
            min: -30,
            max: 30  
           }
         }],
       }
     }
   }
});

【讨论】：