chart.js中具有不同大小(不同标签)的两个线数据集

sz81bmfz 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(183)

我有这两个数据集：
1.来自过去三天的约800个值，以及这些天的时间戳
1.过去三天的3个值，时间戳为午夜
有没有可能在一个图中显示这两行，但第二行是关于第1行的时间戳的？当我阅读文档时，有写所有数据集应该有相同数量的标签，但后来我遇到了一些解决方案，可以做我想要的。但这些解决方案似乎是为以前版本的chart.js和不再工作。
或者是修改数据集的唯一解决方案2）为数据集中的每个点插值1）非常感谢
这是代码：

let labels = []

let date = new Date();
date.setDate(date.getDate() - 10);

const tenDays = [];
for (let i = 0; i < 10; i++) {
  const dateToDisplay = date.setDate(date.getDate() + 1);
  labels.push(new Date(dateToDisplay).toISOString());
  
  //array of 10 days in history from now
  tenDays.push({
    time: dateToDisplay,
    value: Math.floor(Math.random() * 10)
  })
}

date = new Date();
date.setDate(date.getDate() - 10);

//array of only three days, in tenDays array that is 1st, 5th and 10th day   
const threeDays = [
  {time: date, value: 6 },
  {time: date.setDate(date.getDate() + 5), value: 4 },
  {time: date.setDate(date.getDate() + 5), value: 5 },
];

var dataset1 = {
  label: 'dataset1',
  data: tenDays.map(data => data.value)
}

var dataset2 = {
  label: 'dataset2',
  data: threeDays.map(data => data.value)
}

//create Chart
new Chart(document.querySelector('#chart') as HTMLCanvasElement, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [dataset1, dataset2],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
  },
});

That produces this但我想要的是画成绿色的here

chart.js

来源：https://stackoverflow.com/questions/77015528/two-line-datasets-with-different-size-different-labels-in-chart-js

1条答案

按热度按时间

xuo3flqw1#

如果你有两个数据集的实际时间，你可以用它们来把点放在x轴上。因此，您可以：

保留每个数据集中的时间
不定义标签
将x轴的类型设置为“time”而不是默认的“category”（包括所需的适配器并设置其他相关属性）
为了方便，定义了解析键。

然后每个点都被放置在正确的时间，它被定义的地方，一切福尔斯到位了。下面是包含这些更改的代码的简化版本：

let date = new Date();

date.setDate(date.getDate() - 10);
const tenDays = [];
for (let i = 0; i < 10; i++) {
  const dateToDisplay = date.setDate(date.getDate() + 1);
  //array of 10 days in history from now
  tenDays.push({
    time: dateToDisplay,
    value: Math.floor(Math.random() * 10)
  })
}

date = new Date();
date.setDate(date.getDate() - 10);

//array of only three days, in tenDays array that is 1st, 5th and 10th day   
const threeDays = [{
    time: date.setDate(date.getDate() + 1),
    value: 6
  },
  {
    time: date.setDate(date.getDate() + 4),
    value: 4
  },
  {
    time: date.setDate(date.getDate() + 5),
    value: 5
  },
];

//create Chart
new Chart(document.querySelector('#chart'), {
  type: 'line',
  data: {
    datasets: [{
        data: tenDays,
        label: "many"
      },
      {
        data: threeDays,
        label: "few"
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    parsing: {
      xAxisKey: "time",
      yAxisKey: "value",
    },
    scales: {
      x: {
        type: "time",
        time: {
          unit: "day"
        }
      }
    }
  },
});

<div style="min-height:300px">
  <canvas id="chart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

我不确定这是否是你想要的，你是否有两个数据集的实际时间。

赞(0）回复(0）举报 2023-10-18

我来回答

chart.js中具有不同大小(不同标签)的两个线数据集

1条答案

相关问题

热门标签

最新问答