For 循环使用 Django 数据作为输入创建带有 CanvasJs 的散点图答案

【问题标题】：For loop to create Scatter chart with CanvasJs using Django data as inputFor 循环使用 Django 数据作为输入创建带有 CanvasJs 的散点图
【发布时间】：2017-04-10 22:25:57
【问题描述】：

我发现我可以在我的 HTML 模板中使用 CanvasJS 创建漂亮的散点图（请参阅链接：http://canvasjs.com/docs/charts/chart-types/html5-scatter-chart/）

我正在使用 Django 和 MySQL 数据库创建一个网站。在我的一张表（模型）中，我有 3 个字段 VARCHAR 包含不同的值： - 第一个字段包含 X 轴的值。 - 第二个字段包含 Y 轴的值。 - 第三个字段包含一个字母标签。

如果不清楚，这里是一个条目的示例：

第一个字段：

999.99;-89.01;-60.29;-145.83;-140.76;-148.24;-88.70;56.92;69.08;-121.37

第二个字段：

143.12;146.51;143.73;177.58;121.68;116.45;-14.05;20.77;15.82;168.20

第三场：

CPPEEECTTE

如您所见，值由“;”分隔在字段 1 和 2 中。字段 1 有 10 个值，字段 2 有 10 个值，对应的字母标签有 10 个。所有字段都是 1 个长字符串。

所以我的问题很简单，我不知道如何在 javascript 中创建一个 for 循环，以便在散点图中获取这些坐标。

这里是我想要获取的散点图canvasjs的例子：

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
     title:{
      text: "Title of my scatter chart"
    },

    data: [
    {
     type: "scatter",
     dataPoints: [

     { x: 999.99, y: 143.12 },
     { x: -89.01, y: 146.51 },
     { x: -60.29, y: 143.73 },
     { x: -145.83, y: 177.58 },
     { x: -140.76, y: 121.68 },
     { x: -148.24, y: 116.45 }
     ]
   }
   ]
 });

chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

我只想用 for 循环在 dataPoints 中生成坐标。 3 个字段将是 HTML 表中的 3 行。第三个字段将用于将颜色与字母相关联。（例如：C = 蓝色，P = 绿色，E = 黄色，T = 红色）。

我完全不知道如何在 javascript 中制作它。如果有人在 JS 方面有经验，我将非常感谢一些帮助。

【问题讨论】：

标签： javascript python django canvas html5-canvas

【解决方案1】：

您可以通过遍历数组（包含 x、y 值和颜色）并将它们转换为 format required by CanvasJS 和 updating the chart options 来实现。

   for(var i = 0; i < xVal.length; i++) {
       chart.options.data[0].dataPoints.push({
           x: parseFloat(xVal[i]),
           y: parseFloat(yVal[i]),
           color: colorArr[i]
       });
   }

这是一个jsfiddle 。

【讨论】：

在我的例子中，Xs 和 Ys 不是数组，它们是长字符串。
请查看jsfiddle。 x 和 y 值是字符串。
jsfiddle 似乎确实做了我想要的。现在为时已晚，但无论如何谢谢你，我接受你的回答;）！