将 x 轴点转换为年

Question

我需要一些关于渲染 Highcharts 的帮助。我正在尝试创建一个图表，以便我从 Rails 服务器获得的数据将呈现此图表。

到目前为止，我只得到了如下所示的图表：

与我尝试创建的图表相比，我的图表显然有很多问题。图表的视觉方面与我无关。我关心的是图表的 xAxis。我似乎绝对无法让我的高位图表具有年度价值。无论我做什么，时间都以毫秒为单位呈现，这真是 F$@#ING 真气。

下面是我的chart.js.erb文件：

var presentDay = new Date();
var year = presentDay.getFullYear();
var year = year - 3;
var month = presentDay.getMonth();
var day = presentDay.getDay();

$(function() {
  new Highcharts.Chart({
    chart: {
      renderTo: "graphModal",
      height: 450,
      width: 700,
      borderWidth: 5,
      borderColor: '#525252'
    },
    title: {
      text: "Project Comparison Graph"
    },
    subtitle: {
      text: '# of contributors who made changes to the project source code each month'
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        year: '%Y'
      }
    },
    yAxis: {
      title: {
        text: 'Contributors'
      }
    },
    plotOptions: {
      series: {
        pointStart: Date.UTC(year, month, day),
        pointIntervalUnit: 'month',
        lineColor: 'red'
      }
    },
    series: [{
      data: [1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20,1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20,1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20]
    }]
  });
});

文件最顶部的 JavaScript 代码创建了 3 年前的日期，我从该日期开始在 pointStart 上绘制图表。我有36个情节点。一年中的每个月一个。如果我想要三年前的数据，代码将执行 2012 年 4 月 10 日至今。我得到的不是一个漂亮干净的图表，而是你在上面看到的。我该如何解决？我从 jsFiddle 上的这个例子中得到了这段代码：

 $(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '20' + '%y'
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2012, 0, 1),
            pointIntervalUnit: 'month'
        }]
    });
});

我让它在 fiddle 上运行，所以它现在不能运行了吗？

Answer 1

你的代码非常接近示例图像，我添加的是以下内容JavaScript（设置宽度需要自定义阴影）：

plotOptions: {
  /*Your original values...*/
  line: {
    marker: {enabled:false},
    shadow: {
        color: '#000',
        width: 5,
        opacity: 0.15,
        offsetY: 2,
        offsetX: 2
    },
    lineWidth: 4
  }
}

var presentDay = new Date();
var year = presentDay.getFullYear();
var year = year - 3;
var month = presentDay.getMonth();
var day = presentDay.getDay();

$(function() {
  new Highcharts.Chart({
    chart: {
      renderTo: "container",
      height: 450,
      width: 700,
      borderWidth: 5,
      borderColor: '#525252'
    },
    title: {
      text: "Project Comparison Graph"
    },
    subtitle: {
      text: '# of contributors who made changes to the project source code each month'
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        year: '%Y'
      }
    },
    yAxis: {
      title: {
        text: 'Contributors'
      }
    },
    plotOptions: {
      series: {
        pointStart: Date.UTC(year, month, day),
        pointIntervalUnit: 'month',
        lineColor: 'red'
      },
      line: {
        marker: {
          enabled: false
        },
        shadow: {
          color: '#000',
          width: 5,
          opacity: 0.15,
          offsetY: 2,
          offsetX: 2
        },
        lineWidth: 4
      }
    },
    series: [{
      data: [1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20, 1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20, 1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

将 x 轴点转换为年

Translate x axis points into years

javascript

highcharts