django + chart.js :无法使用适当的数据获取同一图形上的两个条形图
问题描述： 在使用django和chart.js时，如何实现在同一个图形上显示两个条形图的数据？
回答： 要在同一个图形上显示两个条形图的数据，可以通过以下步骤实现：
- 安装chart.js库：在django项目中，可以使用静态文件管理器（如django-staticfiles）将chart.js库添加到项目中。可以通过以下链接下载chart.js库：chart.js官方网站。
- 创建视图函数：在django中，可以创建一个视图函数来处理数据获取和图表渲染的逻辑。可以使用django的ORM（对象关系映射）来获取数据，并将数据传递给模板。
- 创建模板：在django中，可以使用模板引擎来渲染图表。可以在模板中使用chart.js库的JavaScript代码来创建和配置图表。
- 获取数据：在视图函数中，可以使用django的ORM来获取需要显示的两个条形图的数据。可以根据需要从数据库中查询数据，并将数据传递给模板。
- 渲染图表：在模板中，可以使用chart.js库的JavaScript代码来创建和配置图表。可以使用chart.js的文档和示例来了解如何使用不同的配置选项和数据格式来创建条形图。
以下是一个简单的示例代码：
# views.py
from django.shortcuts import render
from .models import DataModel
def chart_view(request):
data1 = DataModel.objects.filter(category='category1')
data2 = DataModel.objects.filter(category='category2')
return render(request, 'chart.html', {'data1': data1, 'data2': data2})
# chart.html
<!DOCTYPE html>
<html>
<head>
<title>Chart Example</title>
<script src="{% static 'chart.js' %}"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chartData = {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'Data 1',
data: [
{% for item in data1 %}
{{ item.value }},
{% endfor %}
],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: 'Data 2',
data: [
{% for item in data2 %}
{{ item.value }},
{% endfor %}
],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
};
var myChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>在上述示例中，视图函数chart_view从数据库中获取两个条形图的数据，并将数据传递给模板chart.html。模板中使用chart.js库的JavaScript代码来创建和配置图表，通过循环遍历数据来动态生成图表的数据部分。
注意：上述示例中的代码仅为示意，实际使用时需要根据项目的具体需求进行适当的修改和调整。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云数据库MySQL版、腾讯云对象存储（COS）等。您可以在腾讯云官方网站上找到这些产品的详细介绍和文档。
希望以上回答能够帮助到您！
相关·内容
我是javascript的新手，我不能使用条形图来解决问题。问题似乎出在chart3数据部分。我不知道如何组织这两个语句来获得适当的数据。我已经尝试了所有方法，以便能够在条形图中显示相邻的两个值，但似乎没有任何方法能够做到这一点。有人发现我哪里错了吗？数据：
{'supplier : "ARAGON", average_service_level_im
浏览 3提问于2020-05-05得票数 0
回答已采纳
1回答
我在我的项目中使用chart.js。正如您在下面的代码中所看到的，chart.js对同一数据使用不同的y轴和条形图的最小值和最大值。一种选择是找到我自己的最小、最大和步长值，并在比例下使用属性min、max和ticks.stepSize。但是，为给定的数据寻找最小、最大和步长是一项严肃的任务。对于我的<
浏览 6提问于2022-11-16得票数 0
回答已采纳
我所拥有的是一组我想要显示为条形图的数据。我的数据是主数据集的一部分，与三个不同类别的整个数据集的平均值相比。所以基本上，我想要的是6个不同的条形图叠加在同一个轴上，3个用于用户选择的条形图，另外三个用于整个数据集的平均值。我可以做一个很好的</em
浏览 3提问于2013-05-06得票数 0
没有关于从数据库获取数据的连接的chart.js文档，这就是为什么我仍然好奇如何从外部图形数据实现我的条形图。到目前为止，我使用的是codeigniter框架，我不认为CI有图表图形库。因此，在第二次思考中，我将如何在我的框架中正确地实现该图。因此，首先我加载了一个离线chart.js：
<script src="
浏览 3提问于2017-08-14得票数 1
4回答
我正在用Django制作一个报告应用程序，它包含了大量的图表。是否有一个简单的图形库/模块可以让我实现这个工作流：
图形库/模块将数据操作为图表/图表，我可以轻松地将其输出到Django模板。过去几天我一直在玩Matplotlib和Django。在Django中
浏览 16提问于2011-04-12得票数 32
回答已采纳
我正在寻找一个有用的库，可以帮助我在画布上绘制不同的交互式图表，图形等。基本上，我正在设计一个类似网络绘画的应用程序，并添加这些交互式图表的功能等，所以我想要的是，当用户单击特定的图表时，他可以点击画布内的任何地方，图表出现在那里与用户在文件中给出的数据(我会处理，一旦我知道了数据格式和东西我尝试了一些库，但它们要么不支持画布中的绘图，要么不提供
浏览 4提问于2013-12-05得票数 0
我尝试做的是用time类型绘制和HorizontalBarChart，作为一种混合类型，我为每个条设置了一个最小值，但是它似乎不起作用。我的代码： type: 'horizontalBar',
data: {我应该使用另一个库吗？
浏览 0提问于2017-03-16得票数 2
2回答
我正在尝试将我的两个图形绘制在R的同一页上。两个图是:散点图和蝙蝠图: par(mfrow=c(2,1)) p，其中p是条形图，s是散点图。当我使用命令时:首先显示p图，最后只显示s-散点图。我知道这两个情节都在那里，但我无法修复它！我真的需要帮助。
浏览 1提问于2018-02-04得票数 1
我正在使用Chart.js和Vue来处理来自数据库的图形数据，我想知道是否有任何方法可以使图形的标题和图例在同一行上对齐？将图例与“end”对齐，使其大致处于正确的位置，但它仍然位于标题下面的行上。 下面是我正在尝试实现的一个示例： ?
浏览 25提问于2021-01-22得票数 0
2回答
谁能给我演示一下Chart.js 2.6+用来计算条形图中Y轴的数学逻辑？我已经创建了一个分页功能，允许我在具有大量柱状图的条形图中分页。它工作得很好，除了我需要在图表的数据集发生变化时Y轴保持不变。
为此，我获取图表的数据并创建其子集，例如前20条记录，并将其作为数据对象提供给图表。但是，为了使Y轴固定，我采用完整数据集中的最大值，并将其作为图表中yAxes对象
浏览 5提问于2017-07-20得票数 3
回答已采纳
我正在尝试实现叠加的条形图(水平的，响应的)。
但是，我得到的是随机颜色，而不是在barchartColors中编码的颜色。实际输出
浏览 3提问于2021-04-23得票数 1
1回答
我正在使用chart.js，并试图将两个插件添加到同一图表中，但当应用时，这两个插件都会消失，并且控制台中没有直接错误。<code>C1</code>
基本上，图形必须在折线图上显示数据标签，同时绘制yAxis线，但只能从折线图上的点开始。由于某些原因，当两
浏览 17提问于2019-08-22得票数 2
回答已采纳
我得到了一个固定长度的条形图(由UITableView支持)，每个条形图都由一个核心数据实体表示，所有实体都有时间戳，并且相互跟踪，所以将这样的数据排序成如下所示的图表。这种图表的好处是，可以使用NSFetchedResultsController动态更新表视图，以响应添加的新事件。结果是，在用户看来，随着时间的推移，左边添加了新的条形图。
然后，我可以<em
浏览 3提问于2012-10-07得票数 1
回答已采纳
我呈现一个图表/line图形和Chart.js，其中显示服务器上个月的ping (云函数每小时运行一次，数据被发送到时间序列数据库)。但是事故会发生，服务器有时是无法到达的。此外，有时数据只是丢失。我需要以不同的方式展示这两个案子。例如，是否有办法在服务器离线时将图形的一部分涂成红色，在缺少数据时用灰色表示？最好使用Chart.
浏览 3提问于2021-02-02得票数 0
您好，我是js新手，我想问一下，我有两个组件，一个是仪表板，另一个是chart.js。我想让仪表板速度日期在图表上绘制图形，js幸运的是，我从用户数据中获得了数据，现在是时候将这些数据发送到chart.js文件了。我已经创建了两个函数，在其中我们可以获得像这样的数据 const graphdata =(graph)=>{
console.log("initi
浏览 31提问于2021-08-03得票数 0
我有一个这样的数据文件："Overhead 1" 200我试图绘制这个数据的直方图，它将执行时间显示为单个条形图，而开销1和开销2则显示为单个叠加条形图plot "wq_time_profile.dat" u 1 notitle, "" u 2 notitle, "" u 3 notitle
我<em
浏览 1提问于2012-11-30得票数 2
回答已采纳
1回答
我正试图将一个自定义的Chart.js工具提示放在两个条形图的中间。我对chart.js文档和不同的帖子进行了研究，但没有发现任何不同的方法，而是使用以下代码段定位它(我使用jquery并执行一个切换类来隐藏/显示工具提示，请关注我用来定位工具提示的值)：[
我还尝试使用x和y值的tooltipModel，但
浏览 0提问于2018-10-10得票数 0
回答已采纳
1回答
我有一个应用程序(使用Vue)，它在不同的页面上呈现许多不同的图形。我正在添加一个PDF下载功能，允许在一个PDF中下载所有的图形。对于Pdf生成，我使用的是JsPDF。当前，当打开包含图表的页面时，所有图表都在客户端呈现。在Chart.js中，可以保存任何图表的base64编码的字符串数据。我试图弄清楚如何在不实际呈现图形的情况下获得这个bas
浏览 1提问于2021-01-25得票数 1
回答已采纳
作为一些背景信息，我已经使用Chart.js插件实现了4个图形，并使用PHP从数据库中传递了所需的数据。这一切都是正确的，而且很好。
我的问题是，我需要将数据显示在工具提示中，即格式化数据。例如，我从数据库中获得的数据之一是-0.17222。我把它格式化成一个百分比，显示在我的桌子上，一切都很好。但是，当为<e
浏览 2提问于2015-02-17得票数 62
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
