Question

我使用Chart JS绘制图表。

有什么问题？ /我想要什么？
Y轴刻度值应更改为HH：MM：SS格式。但它不起作用。

这是我传递的数据对象：

{"datasets":[{"lineTension":0.1,"backgroundColor":"rgba(19, 610, 2170,0.1)","borderColor":"rgba(19, 610, 2170,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF001","data":[1234,1234,623,485,1091,731,634,634,731]},{"lineTension":0.1,"backgroundColor":"rgba(1, 550, 1600,0.1)","borderColor":"rgba(1, 550, 1600,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF002","data":[863,863,956,524,512,572,743,743,572]},{"lineTension":0.1,"backgroundColor":"rgba(114, 1550, 650,0.1)","borderColor":"rgba(114, 1550, 650,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF003","data":[1091,1091,1183,820,840,960,911,911,960]},{"lineTension":0.1,"backgroundColor":"rgba(221, 80, 1180,0.1)","borderColor":"rgba(221, 80, 1180,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF004","data":[963,963,914,840,963,543,663,663,543]},{"lineTension":0.1,"backgroundColor":"rgba(82, 1000, 1300,0.1)","borderColor":"rgba(82, 1000, 1300,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF005","data":[1146,1146,1029,1234,1146,666,786,786,666]},{"lineTension":0.1,"backgroundColor":"rgba(176, 630, 1010,0.1)","borderColor":"rgba(176, 630, 1010,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF006","data":[594,594,765,863,1234,754,474,474,754]},{"lineTension":0.1,"backgroundColor":"rgba(45, 2030, 1090,0.1)","borderColor":"rgba(45, 2030, 1090,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF007","data":[613,613,512,1091,863,563,673,673,563]},{"lineTension":0.1,"backgroundColor":"rgba(198, 1880, 230,0.1)","borderColor":"rgba(198, 1880, 230,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF008","data":[485,485,560,963,1091,1091,365,365,1091]},{"lineTension":0.1,"backgroundColor":"rgba(223, 200, 1500,0.1)","borderColor":"rgba(223, 200, 1500,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF009","data":[524,524,474,1146,963,183,243,243,183]},{"lineTension":0.1,"backgroundColor":"rgba(41, 1460, 1780,0.1)","borderColor":"rgba(41, 1460, 1780,1)","borderCapStyle":"butt","borderDash":[],"borderDashOffset":0,"borderJoinStyle":"miter","pointBorderColor":"rgba(75,192,192,1)","pointBackgroundColor":"#fff","pointBorderWidth":1,"pointHoverRadius":5,"pointHoverBackgroundColor":"rgba(75,192,192,1)","pointHoverBorderColor":"rgba(220,220,220,1)","pointHoverBorderWidth":2,"pointRadius":1,"pointHitRadius":10,"spanGaps":false,"label":"RF010","data":[820,820,696,594,1146,246,186,186,246]}],"labels":["26/05/2016 | 1","26/05/2016 | 2","26/05/2016 | 3","27/05/2016 | 1","27/05/2016 | 2","27/05/2016 | 3","28/05/2016 | 1","28/05/2016 | 2","28/05/2016 | 3"],"options":{"scales":{"yAxes":[{"stacked":true,"ticks":{}}]},"tooltips":{"callbacks":{}}}}

Preview

secondsToHms（）功能：

    function secondsToHms(totalSec){
        var hours = parseInt( totalSec / 3600 ),
        minutes = parseInt( totalSec / 60 ) % 60,
        seconds = totalSec % 60;

        return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
    }

我得到的是输出： http://i.stack.imgur.com/2TGxw.png

遵循的步骤： https://github.com/chartjs/Chart.js/issues/2791#issuecomment-237690528 具体是下面提到的部分：

scales: {
    yAxes: [{
      ticks: {
        userCallback: function(v) { return epoch_to_hh_mm_ss(v) },
        stepSize: 30 * 60
      }
    }]
  },
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        return data.datasets[tooltipItem.datasetIndex].label + ': ' + epoch_to_hh_mm_ss(tooltipItem.yLabel)
      }
    }
  }

CharJS中Y轴的时间尺度转换

0 个答案: