图表-具有不同大小数据集的折线图
我正在开发一个应用程序，它将生成一些图表，我正在使用chartjs来绘制它们。
我面临的问题是：图表将用动态数据生成。应用程序最多可以生成9个数据集，很少会有相同的大小。当数据集大小不匹配时，如何使图表提前或填充值？
我在stackoverflow甚至在chartjs github页面上看到了一些例子，但它们对我不起作用。
这是我目前所拥有的一个示例:https://jsfidle.net/camarrone/49onz8no/1/
具有不同数据数组的两个数据集。第二个数据集的第一个值不存在，因此它应该为零或空。像这样:https://jsfidle.net/camarrone/d39a0qgw/
这是“失败”代码供参考：
<html>
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
type: 'line',
fill: false,
label: 'Label_1',
borderColor:"hsl(181.40751321285697,45.9256727159548%,27.54659126333186%)",
data: [7,3,11,2,3]
},
{
type: 'line',
fill: false,
label: 'Label_2',
borderColor:"hsl(181.91996173600447,39.046658571489985%,65.63412032509264%)",
data: [1,6,1,2]
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
}
});
</script>
</body>
</html>
共有2个答案
我没有使用X/Y格式的数据集，所以我一直在查找。我最终发现插入'null'值解决了我的问题--这样数组就可以是相同的长度，并且不会有掉到零污染形状。
但是，请注意，这似乎不适用于线图上的对数刻度。幸运的是，我所使用的不均匀长度数据集的唯一图形可能最好以线性形式呈现，但这是令人恼火的。
还请注意，您可能希望使用{spangaps:false}选项。
供那些面临同样问题的人和将来参考。下面是我的案例的工作代码：
<html>
<head>
<script type='text/javascript' src='./momentjs-with-locales.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
fill: false,
label: 'Page View',
borderColor: "hsl(226.15793242887034,78.48665583019744%,62.177112879909686%)",
data: [
{
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date('2018-04-21T16:00:00'),
y: 7
},
{
x: new Date("2018-04-21T18:00:00"),
y: 3
},
{
x: new Date("2018-04-21T20:00:00"),
y: 11
},
{
x: new Date("2018-04-23T12:00:00"),
y: 2
},
{
x: new Date("2018-04-23T13:00:00"),
y: 3
}
],
},
//dataset 2
{
fill: false,
label: 'View Content',
borderColor: "hsl(232.84952363040048,93.45575469963681%,28.844243872178236%)",
data: [
{
labels: ["2018-04-21T17:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date("2018-04-21T17:00:00"),
y: 1
},
{
x: new Date("2018-04-21T20:00:00"),
y: 6
},
{
x: new Date("2018-04-23T12:00:00"),
y: 1
},
{
x: new Date("2018-04-23T13:00:00"),
y: 2
}
],
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
scales: {
xAxes: [
{
type:'time',
distribution: 'series',
time: {
unit: 'day',
displayFormat: {
day: 'DD/MM/YYYY'
}
},
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
}
]
}
}
});
</script>
</body>
</html>
在线演示：
-
我设置了一个chart.js图表，它使用mysql数据库中的数据。我已经建立了一个rest服务来提供tha数据，具有定义分组IE的能力。数据每隔5分钟测量一次，但我将其分组为3小时段，使用我的SQL语句 我希望能够通过定义一个新的粒度来改变数据的粒度。 我创建了一个更新函数来将请求发送到后端，并更新图表。 图表已更新，但默认值有61个条目（目前），最细粒度的数据有180个条目。所发生的情况是，数据
-
问题内容： 我只是有一个想法可以测试一些东西，并且有效： 输出显然是： 所以我的问题是： 这是好是坏的编码风格？ 这有什么好处？ 最重要的是，是否可以在声明本身中创建这样的构造？ 另外…为什么甚至有可能做？ 问题答案： 这是好是坏的编码风格？ 像任何东西一样，这取决于情况。在某些情况下， 锯齿状数组 （称为它们）实际上是适当的。 这有什么好处？ 好吧，用于将不同长度的数据集存储在一个数组中。例如，
-
问题内容： 我正在使用ajax加载数据并在DataTable中动态生成列名。我的数据表具有不同的列数，具体取决于用户的选择。（有一个下拉列表）。 例如，下拉列表中有2个选项，即“ 南部省” 和“ 北部省” 。 南部省 表有4列， 北部省 表有6列。 场景1 第一个用户选择具有4列的 Southern Province 。然后它生成的表没有错误，但是在此之后，如果用户选择具有6列的 Northern
-
我有2个不同大小的数据帧df1-df2（df2比df1有更多的行和列）。 我试图分配的值从df2['率']到df1['率']，在其中df1['单元']==df2['单元']行。 期望的输出是 我尝试了不同的方法： 只能比较相同标记的Series对象 给我假消息 我认为这来自于这样一个事实，即两个数据帧从一开始就有不同的大小。然而，我不明白为什么它应该阻止它做比较。我不确定如何从这里开始。
-
我已经开始使用图表v2的最新测试版。js，因为我需要在同一个图表上绘制一个包含堆叠条形图和非堆叠折线图的图表。以下是我需要的示例： 在此图表中，线条没有堆叠在一起，并且都显示了它们的自然值，但是条形图是堆叠在一起的，并且显示了这些值的组合总和(包括一些负值)。 我已经成功地将两个图表绘制在一起，但到目前为止，我只成功地将这两个图表堆叠起来，或者我不得不使用两个单独的y轴，最终得到两个刻度。这里有一
-
我正在使用的数据库有许多具有相同列但（显然）具有不同表名的表（不是我设计的）。例如（这些是数据库表名）： 有没有可能用JPA和Hibernate将这些映射到一个Java类实体？类的名称是，然后在使用它时传入例如，以便对象使用表？ 还是只使用普通的、普通的Java对象来完成这样的任务更好？ 谢谢你！