javascript - 如何将日期而不是值传递到基线 Highcharts 中的 x 轴

标签 javascript php highcharts

这是基线 Highcharts,其 x 轴上有值,y 轴上有百分比, 请分享如何将日期而不是值传递到 x 轴,这样,这是我的 highcharts 代码。

<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div> 

</body>   

      <script>

      $('#container').highcharts({
          title: {
              text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
              x: -20 //center
          },
          tooltip: {
              formatter: function () {
                //  console.log(this.point.extprop);
                  var s = 'The value is <b>' + this.x +
                      '</b> is <b>' + this.y + '</b>';
                  if (this.point.extprop) {
                      s += 'for <b>' + this.point.extprop + '</b>';
                  }
                  return s;
              }
          },
          subtitle: {
              text: '',
              x: -20
          },
          yAxis: {
              title: {
                  text: 'Percent'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          legend: {
              layout: 'vertical',
              //align: 'right',
              //verticalAlign: 'middle',
              borderWidth: 0
          },
          series: [{
              name: 'RNA',
              data: [{
                  x: 0,
                  y: 99.43,
                  extprop: 'power issue'
              }, {
                  x: 1,
                  y: 99.40,
                  extprop: 'flood'
              }, {
                  x: 2,
                  y: 99.24,
                  extprop: 'power issue'
              }, {
                  x: 3,
                  y: 99.40,
                  extprop: 'flood'
              }, {
                  x: 4,
                  y: 99.21,
                  extprop: 'power issue'
              }, {
                  x: 5,
                  y: 98.45,
                  extprop: 'flood'
              }, {
                  x: 6,
                  y: 98.41,
                  extprop: 'power issue'
              }, {
                  x: 7,
                  y: 99.18,
                  extprop: 'flood'
              }, {
                  x: 8,
                  y: 99.36,
                  extprop: 'power issue'
              }, {
                  x: 9,
                  y: 99.31,
                  extprop: 'flood'
              }, {
                  x: 10,
                  y: 99.38,
                  extprop: 'power issue'
              }, {
                  x: 11,
                  y: 99.20,
                  extprop: 'flood'
              }, {
                  x: 12,
                  y: 99.38,
                  extprop: 'power issue'
              }, {
                  x: 13,
                  y: 99.32,
                  extprop: 'flood'
              }]
          }],
          credits: {
              enabled: false
          }
      });

</script>
</html>

这是 jsfiddle 链接:http://jsfiddle.net/wergeld/hj22wbe5/

我想将日期而不是值传递到 x 轴。 像这样 14 年 7 月 18 日、2014 年 7 月 19 日、2014 年 7 月 20 日...,以便根据日期和百分比绘制图表...

请帮忙

谢谢...

最佳答案

将 xAxis 类型设置为“日期时间”。

然后您可以

  • 将日期作为数据数组的一部分传递

  • 使用 pointStart 和 pointInterval 来处理正确的日期对齐

对日期使用类别既违反直觉,又会失去日期时间轴的所有优势。

引用文献:

关于javascript - 如何将日期而不是值传递到基线 Highcharts 中的 x 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25723385/

相关文章:

javascript - xAxis 上的 Highcharts 中会跳过类别

javascript - CSS/Javascript 鼠标悬停弹出框

javascript - 获取元素的高度然后添加类/更改 css

javascript - chrome.notifications 消息未显示

php - 如何找到 apc.php 文件位置?

PHP/MySQL 如何从新窗口显示数据库行?

JavaScript 方法以/分配的变量开头??非常困惑

javascript - Jquery keydown 不起作用

php - 按组输出 - 也许是foreach?

HTML 页面在外部服务器上丢失格式