chart.js条形图时间轴工具提示问题

时间:2017-09-12 18:33:25

标签: chart.js

我正在绘制带有时间轴的条形图,X轴单位为“天”,并且刻度将相隔30天。使用此工具提示不显示。我使用的是2.0 beta2版本。它是一个带有随机时间样本数据的1年图。 UserCallBack函数跳过30天的滴答。

有关工具提示未显示的任何建议吗?

var canvas = document.getElementById('myChart');
var labelsArray = ["2017/06/09 00:00:00", "2017/07/05 00:00:00"];
var data = {
  labels: labelsArray,
  datasets: [{
    label: "My First dataset",
    data: [10, 50],
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
  }]
};


var xAxesConfig = [{
  type: "time",
  categoryPercentage: 0.1,
  barPercentage: 0.2,
  time: {
    displayFormat: 'MMM-DD',
    format: 'YYYY/MM/DD HH:mm:SS',
    unit: 'day',
    min: '2016/09/12 17:00:00',
    max: '2017/09/12 17:00:00'
  },
  scaleLabel: {
    display: true,
    labelString: 'Time',
    fontSize: 14,
    fontStyle: "bold"
  },
  ticks: {
    maxRotation: 0,
    autoSkip: false,
    userCallback: function(value, index, values) {
      return (index % 30 == 0) ? value : null;
      //return value;
    }
  }
}];

var yAxesConfig = [{
  position: 'left',
  gridLines: {
    display: true
  },
  ticks: {
    maxTicksLimit: 5,
    suggestedMin: 0,
    suggestedMax: 10
  },
  scaleLabel: {
    display: true,
    labelString: 'Value',
    fontSize: 14,
    fontStyle: "bold"
  }
}];

var option = {
  scales: {
    yAxes: yAxesConfig,
    xAxes: xAxesConfig,
  }
};

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: option
});

0 个答案:

没有答案