Question

我正在尝试用谷歌图表制作燃尽图。

我已经设置了所有需要的数据并分成了2个不同的数据集，一个用于指南，另一个用于剩余的点。

我现在遇到了这个问题，我无法同时显示这两行。它显示guidline或其余点。我加入了数据集但仍然没有成功：

  var joinedData = google.visualization.data.join(guidelineData, remainingData, 'full', [[0, 0]], [1], [1]);

  var chart = new google.visualization.LineChart(document.getElementById('burndown-chart'));

  chart.draw(joinedData, options);

https://jsfiddle.net/Lvx5tdy6/6/

有谁知道如何解决它？

感谢您的帮助

Answer 1

问题是指南只有两个数据点，您将其映射到现有数据集，只有第一个日期匹配。这意味着您只能在图表上获得一个点。

我发现您在数据之间有不规则的时间间隔，因此您无法使用线性函数将指南从1.0 * guidelineValStart映射到0.0 * guidelineValStart。

您可以做的是使用实际数据并强制理想的行匹配：

var guidelineDateStart = guideline[0].date;
var guidelineValStart = guideline[0].guideline;

var milliS =  1000 * 60 * 60 * 24;
var numDays = (remaining[remaining.length - 1].date - remaining[0].date) / milliS; // work out the number of days that will be displayed

var remainingValues = remaining.map(function(item, idx) {
  return [
    new Date(item.date), 
    item.remaining, 
    (1.0 - (item.date - guidelineDateStart) / milliS / numDays) * guidelineValStart // adjust the ideal line to suit
  ];
});

工作示例：https://jsfiddle.net/ab3e31of/4/

在同一个谷歌图表上显示多个数据集

1 个答案: