Chartjs - 使线开始于 ... 但保持 x 轴数据

Question

I created a dynamic line chart based on some input data.我根据一些输入数据创建了一个动态折线图。 The intention is that the customer can indicate with a dropdown on which month the "Investment" should start.目的是让客户可以通过下拉菜单指明“投资”应该从哪一个月开始。

So, for example, if the "Investment" does not start until month 6, then that line should only start at 6 on the x-axis.因此，例如，如果“投资”直到第 6 个月才开始，那么该行应仅从 x 轴上的 6 开始。 But the other lines "Case" and "ROI" should still just start at 1.但其他行“Case”和“ROI”仍应从 1 开始。

I've tried several things but to no avail.我已经尝试了几件事，但无济于事。

I tried changing the x-axis "min ticks" based on the selection the user made, but that makes all lines start at another point instead of the "Investment" line only.我尝试根据用户所做的选择更改 x 轴“最小刻度”，但这会使所有行都从另一个点开始，而不仅仅是“投资”行。 Another problem is that every number before the selection then dissapears from the x-axis.另一个问题是选择之前的每个数字都会从 x 轴上消失。 But I really want to keep every number from 1-60, even if the user chooses to start the "Investment" on month 10, for example.但我真的想保留 1-60 之间的每个数字，即使用户选择在第 10 个月开始“投资”，例如。

I would really appreciate some help!我真的很感激一些帮助！ Thanks.谢谢。

Here's my fiddle: https://jsfiddle.net/js5pha24/这是我的小提琴： https : //jsfiddle.net/js5pha24/

 var options = { type: 'line', data: { labels: [], datasets: [{ label: 'Case', data: [], backgroundColor: 'rgba(152,164,135, 0.5)', borderColor: 'rgb(152,164,135)', fill: false }, { label: 'Case', data: [], backgroundColor: 'rgba(145,139,167, 0.5)', borderColor: 'rgb(145,139,167)', fill: false }, { label: 'Case', data: [], backgroundColor: 'rgba(206,157,206, 0.5)', borderColor: 'rgb(206,157,206)', fill: false }] }, options: { legend: { display: true, position: "top" }, scales: { xAxes: [{ ticks: { beginAtZero: true, autoSkip: true, maxRotation: 0, minRotation: 0 } }], yAxes: [{ ticks: { callback: value => { return "€ " + value; } } }] } } } for (let i = 1; i <= 60; i++) { options.data.labels.push(i); const caseMonth = 118187 * i; options.data.datasets.find(set => set.label === "Case").data.push(caseMonth); const investMonth = 500000 + (20000 * i); options.data.datasets.find(set => set.label === "Investment").data.push(investMonth); const roiMonth = caseMonth - investMonth; options.data.datasets.find(set => set.label === "ROI").data.push(roiMonth); } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 canvas { background-color : #eee; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script> <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body>

Answer 1

You can put null values on the chart data so one line can start after the others.您可以在图表数据上放置空值，这样一行就可以在其他行之后开始。 For example if you want the investment line start at month 10, you can replace the the first ten investMonth values with null .例如，如果您希望投资行从第 10 个月开始，您可以将前十个投资月值替换为null 。

If understood correctly you still want to use the investMonth value in the roiMonth calculation so I created "investMonthValue" so only investment will get null if it is less than investmentStartMonth.如果理解正确，您仍然希望在 roiMonth 计算中使用投资月值，因此我创建了“投资月值”，因此只有投资小于投资起始月时才会为空。

let investmentStartMonth = 10

for (let i = 1; i <= 60; i++) {
    options.data.labels.push(i);

  const caseMonth = 118187 * i;
  options.data.datasets.find(set => set.label === "Case").data.push(caseMonth);

  let investMonth = 500000 + (20000 * i);
  let investMonthValue = i<investmentStartMonth?null:investMonth
  options.data.datasets.find(set => set.label === "Investment").data.push(investMonthValue);

  const roiMonth = caseMonth - investMonth;
  options.data.datasets.find(set => set.label === "ROI").data.push(roiMonth);
}

Chartjs - 使线开始于 ... 但保持 x 轴数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-19 18:28:23

Chartjs - 使线开始于 ... 但保持 x 轴数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-19 18:28:23

解决方案1
1 已采纳 2020-11-19 18:28:23