使用Javascript访问柱形图的数组
我正在python中构建一个html" target="_blank">flask应用程序，我使用render_template、名称和交易返回两个数组到我的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的部分做了部分。谢谢你的帮助！
共有2个答案
您可以创建一个脚本标记,并在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>
-
Highcharts 柱形图 以下实例演示了使用 HTML 表格数据的柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 data 下添加 table 配置。 data 数据模块提供了一些简单的接口用于添加数据，我们可以使用例如 CVS, HTML 表格或者网格视图中的数据。 data.table Html 表格中设置id，并对应参数 dat
-
本章节我们将为大家介绍几种柱形图的类型。 序号 图表类型 1 基本柱形图 2 反向柱形图 3 堆叠柱形图 4 堆叠组柱形图 5 按百分比堆叠柱形图 6 标签旋转柱形图 7 向下钻取柱形图 8 固定布局柱形图 9 使用 html 表格数据的柱形图 10 区间柱形图
-
Highcharts 柱形图 以下实例演示了使用负值的反向柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart 配置 设置 chart 的 type 属性 为 column ，chart.type 描述了图表类型。默认值为 "line"。 var chart = { type: 'column' }; 实例 文件名：h
-
Colummn图表用于绘制基于colummn的图表。 在本节中，我们将讨论以下类型的基于柱的图表。 Sr. No. 图表类型/描述 1 Basic Column 基本的柱状图 2 Grouped Column Chart Columped Colummn chart。 3 Stacked Column 柱子的柱子有相互叠加的柱子。 4 Negative Stacked Column 与负堆栈的Co
-
柱形图用于绘制基于列的图表。 在本节中，我们将讨论不同类型的基于列的图表。 Sr.No. 图表类型和描述 1 Basic Column 基本柱形图。 2 Column with negative values 柱形图具有负值。 3 Stacked column 列具有相互堆叠的列。 4 Stacked and Grouped column 带有堆积和分组形式的列的图表。 5 Column with
-
柱形图用于绘制基于列的图表。 在本节中，我们将讨论不同类型的基于列的图表。 Sr.No. 图表类型和描述 1 基本栏目 基本柱形图。 2 具有负值的列 柱形图具有负值。 3 堆积的列 列具有相互堆叠的列。 4 堆叠和分组列 带有堆积和分组形式的列的图表。 5 列堆积百分比 图表与堆积百分比。 6 带旋转标签的列 列图中带有旋转标签的柱形图。 7 带钻取的列 具有向下钻取功能的柱形图。 8 具有固定