Question

基线Highcharts具有x轴上的值和y轴上的百分比，请分享如何将日期传递给x轴而不是值，这样，这是我的高级代码。

<!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轴而不是值.. 像这样的18-Jul-14＆＃39;，19-Jul-14,20-Jul-14 ....所以根据日期和百分比绘制图表...

请帮助

谢谢......

Answer 1

将xAxis类型设置为“datetime”。

然后你可以

将您的日期作为数据数据的一部分传递
使用pointStart和pointInterval来处理正确的日期对齐

使用日期类别既违反直觉又失去了日期时间轴的所有好处。

参考文献：

Answer 2

如果你知道日期并且它们是固定的，例如请考虑下面的日期＆＃39;阵列：

dates: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14']

然后您可以使用xAxis：categories在xAxis上显示这些日期，如：

xAxis: {
    categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14'],
    labels:{rotation: 90, x:-20}
},

我提供更多选项，如标签＆＃39;旋转90度，因为它没有足够的空间让它们水平放置，它们混淆了为什么现在它们会像它们应该的那样垂直显示。

<强> See the DEMO here

如何将日期传递到基线高图表中的x轴而不是值

2 个答案: