我正在用 python 构建一个 Flask 应用程序，并使用 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();
它是完成该部分的 tojson 部分。感谢您的帮助!
最佳答案
您可以创建脚本标记并在 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();
}
关于javascript - 在 Javascript 中访问柱形图的数组时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59571233/