0

我在图表中使用日期作为字符串。

如何在 xAxis 中使用开始日期和结束日期字符串变量作为标签？开始日期 = '10.02.2013' 结束日期 = '10.05.2013'

附上代码和图表图像。我唯一需要做的就是添加 startDateLabel 和 endDateLabel。

var dateEndLabel, dateStartLabel, i, j, lastDate, seriesData, x, y;
  i = 0;
  seriesData = new Array();
  lastDate = data[i].Values.length - 1;
  dateStartLabel = data[i].Values[0].Time;
  dateEndLabel = data[i].Values[lastDate].Time;
  while (i < data.length) {
    seriesData[i] = [];
    j = 0;
    x = [];
    y = [];
    while (j < data[i].Values.length) {
      x = data[i].Values[j].Time;
      y = data[i].Values[j].Value;
      seriesData[i].push([x, y]);
      j++;
    }
    i++;
  }
  return $("#criticalWPtrend").highcharts({
    chart: {
      type: "line"
    },
    area: {
      height: "100%",
      width: "100%",
      margin: {
        top: 20,
        right: 30,
        bottom: 30,
        left: 50
      }
    },
    title: {
      text: ""
    },
    subtitle: {
      text: ""
    },
    legend: {
      layout: "vertical",
      verticalAlign: "right",
      align: "right",
      borderWidth: 0
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%m-%d'
      },
      tickInterval: 24 * 3600 * 1000
    },
    yAxis: {
      title: {
        text: 'Value'
      },
      lineWidth: 1,
      min: 0,
      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null
    },
    tooltip: {
      valueSuffix: " "
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        },
        stickyTracking: {
          enabled: false
        }
      },
      line: {
        lineWidth: 2,
        states: {
          hover: {
            lineWidth: 3
          }
        },
        marker: {
          enabled: false
        }
      }
    },
    series: [
      {
        name: data[0].Name,
        data: seriesData[0]
      }, {
        name: data[1].Name,
        data: seriesData[1]
      }, {
        name: data[2].Name,
        data: seriesData[2]
      }, {
        name: data[3].Name,
        data: seriesData[3]
      }, {
        name: data[4].Name,
        data: seriesData[4]
      }, {
        name: data[5].Name,
        data: seriesData[5]
      }
    ],
    navigation: {
      menuItemStyle: {
        fontSize: "10px"
      }
    }
  });
});
4

3 回答 3

1

是的，这可以通过该renderer方法实现。请参阅此基本示例。

chart.renderer.text('10.02.2013', 0, 300)
            .attr({
                rotation: 0
            })
            .css({
                color: '#4572A7',
                fontSize: '16px'
            })
            .add();

您将需要注意 x/y 位置（其他 2 个参数）以正确放置它。您还可以修改文本样式。

于 2013-07-03T17:51:22.857 回答
0

您还可以使用 labelFormatter 和http://api.highcharts.com/highcharts#xAxis.labels.formatter并检查标签 isFirst 或 isLast 然后使用您的日期，在其他情况下返回正确的值（如数字）。

于 2013-07-04T09:01:41.587 回答
0

我不确定，但我认为您只需要通过update 方法更新您的 xAxis

this.xAxis[0].update({
    title: {
        text: "start-date = '10.02.2013'  end-date = '10.05.2013'",
        style: {
            fontSize: '10px'
        }
    }
});

这是示例：http: //jsfiddle.net/FEwKX/

但！ 如果您的意思是开始日期和结束日期需要绑定到边缘，则必须在配置中指定 xAxis 设置

xAxis: {
    categories: categoriesArray 
}

其中 categoriesArray 是这样的数组：

['10.02.2013', '', '', '', '', '', '', '', '', '', '', '10.05.2013']

它应该与您的系列数据长度相同。在这里查看：http: //jsfiddle.net/FEwKX/1/

希望对你有帮助。

于 2013-07-03T19:39:57.360 回答