将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'
        }]
    });
});

我让它在小提琴上工作，所以它现在不起作用了吗？

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
  }
}

＆＃13;

＆＃13;

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]
    }]
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;