在 Javascript 中访问柱形图的数组时出现问题

我正在用python构建一个烧瓶应用程序，我使用render_template，名称和交易返回2个数组到我的HTML文件中。我知道这些工作，因为我尝试了下面的代码，给出了正确的值。

{% for deal in deals %}
<p>Value: {{ deal }}</p>
{% endfor %}

这表明我已经可以在 HTML 中访问它们。接下来我要做的是获取一些图形，并查看 y 轴上的值以及图表上每个条形的名称作为标签。我从 Chart 中找到了一个图形示例.js并开始使用它。但是我一事无成，我唯一真正想要的是更改数据点，因此而不是像这样硬编码：

{ y: 233244, label: "Venezuela" }

它可能是：

{ y: deals[i], label: names[i]  }

这是整个图表函数。

<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Top Oil Reserves"
},
axisY: {
title: "Reserves(MMbbl)"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: [
{ y: 233244, label: "Venezuela" },
{ y: 266455,  label: "Saudi" },
{ y: 169709,  label: "Canada" },
{ y: 158400,  label: "Iran" },
{ y: 142503,  label: "Iraq" },
{ y: 101500, label: "Kuwait" },
{ y: 97800,  label: "UAE" },
{ y: 80000,  label: "Russia" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>

我解决了它，这是实现它的最简单，也可能是最好的方法。我终于通过了它，可以在图形中声明两个数组。我的解决方案如下所示：

var jsDeals = {{ deals|tojson }};
var jsNames = {{ names|tojson }};
var sum = {{ sum|tojson }};
var limit = jsDeals.length;
var dataP = [];
function parseDataPoints () {
for (var i = 0; i <= limit; i++)
dataP.push({y: jsDeals[i], label: jsNames[i]});
}
parseDataPoints();

是托森的部分做了这个角色。感谢您的帮助！

您可以创建一个脚本标记并在 HTML 的头部动态声明变量：

<script>
let chartData = { deals: [], names: [] };
{% for deal in deals %}
chartData.deals.push("{{ deal }}");
{% endfor %}
{% for name in names %}
chartData.names.push("{{ name }}");
{% endfor %}
chartData.dataPoints = chartData.deals.map((deal, index) => ({
y: deal,
label: chartData.names[index]
}));
</script>

然后将现有代码更改为仅使用创建的变量。

var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Top Oil Reserves"
},
axisY: {
title: "Reserves(MMbbl)"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: chartData.dataPoints
}]
});
chart.render();
}

创建自己的函数来执行此操作。首先，初始化图表：

var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Your title"
},
axisY: {
title: "Deals"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: []
}]
});

然后，你可以有一个函数来初始化你的数据：

function initData(deals, names, chart) {
var n = deals.length;
for(var i = 0; i < n; i++) {
chart.data[0].dataPoints.push({y: deals[i], label: names[i]})
}
chart.render();
}

创建新图表后，只需调用initData(deals,names,chart);

如果要在初始化图表后向图表添加更多数据，请使用以下函数：

function addNewDeal(deal, name, chart) {
chart.data[0].dataPoints.push({y: deal, label: name});
chart.render();
}

希望这回答了你的问题。请记住，每次要更改数据时，必须调用chart.render()才能查看更改。

编辑：

最终结果(包括 html(应如下所示：

<!DOCTYPE html>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
function initData(deals, names, chart) {
var n = deals.length;
for(var i = 0; i < n; i++) {
chart.data[0].dataPoints
.push({ y: deals[i], label: names[i]});
}
chart.render();
}
window.onload = () => {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Your title"
},
axisY: {
title: "Deals"
},
labels: names,
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "MMbbl = one million barrels",
dataPoints: []
}]
});
chart.render()
var names = ["name1", "name2", "name3"];
var deals = [1,2,3];
initData(deals, names, chart);
}
</script>
</head>
<body>
<div id="chartContainer"></div>
</body>
</html>

相关内容

最新更新

热门标签：