For循環使用Django數據作為輸入使用CanvasJs創建散點圖
[英]For loop to create Scatter chart with CanvasJs using Django data as input
問題描述
我發現可以使用CanvasJS在我的HTML模板中創建漂亮的散點圖（請參閱鏈接： 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有經驗，我將非常感謝您的幫助。
1 個解決方案
解決方案1
2 已采納 2017-04-17 14:16:46
您可以通過遍歷數組（具有x，y值和顏色）並將其轉換為CanvasJS所需的格式 ，然后更新圖表選項來實現 。
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 。
循環在canvas.js中創建折線圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.