本文介绍了如何在 chartjs 2.0 中隐藏 x 轴之后的值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在 chartjs 2.0 中隐藏越过 x 轴的值?您会注意到图表超出 -60 标记.x 轴使用时间刻度,我设置了最大值和最小值.

这是我的图表配置:

{类型":线",数据":{数据集":[{"label":"散点数据集",数据":[{"x":"2016-09-16T16:36:53Z",y":88.46153846153845},...{"x":"2016-09-16T16:37:54Z",y":88.3076923076923}],点半径":0,"backgroundColor":"rgba(0,0,255,0.5)","borderColor":"rgba(0,0,255,0.7)"}]},选项":{标题":{显示":真,"text":"过去 60 秒的水位"},动画":假,秤":{x轴":[{类型":时间",位置":底部",显示":真,时间":{最大":2016-09-16T16:37:54Z",分钟":2016-09-16T16:36:54.000Z",单位":秒",单位步长":5},滴答声":{回调:函数(值,索引,值){返回 "-" + (60 - 5 * 索引);}}}],y轴":[{显示":真,滴答声":{}}]},传奇":{显示":假}}}
解决方案

你可以使用

... 将给出以下结果:

How do I hide values past the x-axis in chartjs 2.0? You will notice the chart juts past the -60 mark. The x-axis uses a time scale and I have the max and min values set.

Here's my chart configuration:

{
   "type":"line",
   "data":{
      "datasets":[
         {
            "label":"Scatter Dataset",
            "data":[
               {
                  "x":"2016-09-16T16:36:53Z",
                  "y":88.46153846153845
               },
               ...
               {
                  "x":"2016-09-16T16:37:54Z",
                  "y":88.3076923076923
               }
            ],
            "pointRadius":0,
            "backgroundColor":"rgba(0,0,255,0.5)",
            "borderColor":"rgba(0,0,255,0.7)"
         }
      ]
   },
   "options":{
      "title":{
         "display":true,
         "text":"Water Level Over Last 60 Seconds"
      },
      "animation":false,
      "scales":{
         "xAxes":[
            {
               "type":"time",
               "position":"bottom",
               "display":true,
               "time":{
                  "max":"2016-09-16T16:37:54Z",
                  "min":"2016-09-16T16:36:54.000Z",
                  "unit":"second",
                  "unitStepSize":5
               },
               "ticks":{
                        callback: function(value, index, values) {
                            return "-" + (60 - 5 * index);
                        }
               }
            }
         ],
         "yAxes":[
            {
               "display":true,
               "ticks":{

               }
            }
         ]
      },
      "legend":{
         "display":false
      }
   }
}
解决方案

You can achieve this using Chart.js plugins. They let you handle events occuring while creating, updating or drawing the chart.

Here, you'll need to affect before the chart is initialised :

// We first create the plugin
var cleanOutPlugin = {

    // We affect the `beforeInit` event
    beforeInit: function(chart) {

        // Replace `ticks.min` by `time.min` if it is a time-type chart
        var min = chart.config.options.scales.xAxes[0].ticks.min;
        // Same here with `ticks.max`
        var max = chart.config.options.scales.xAxes[0].ticks.max;

        var ticks = chart.config.data.labels;
        var idxMin = ticks.indexOf(min);
        var idxMax = ticks.indexOf(max);

        // If one of the indexes doesn't exist, it is going to bug
        // So we better stop the program until it goes further
        if (idxMin == -1 || idxMax == -1)
            return;

        var data = chart.config.data.datasets[0].data;

        // We remove the data and the labels that shouldn't be on the graph
        data.splice(idxMax + 1, ticks.length - idxMax);
        data.splice(0, idxMin);
        ticks.splice(idxMax + 1, ticks.length - idxMax);
        ticks.splice(0, idxMin);
    }
};

// We now register the plugin to the chart's plugin service to activate it
Chart.pluginService.register(cleanOutPlugin);


The plugin is basically a loop through the data to remove the values that shouldn't be displayed.

You can see this plugin working in a live example on jsFiddle.

For instance, the following chat with a min set to 2 and a max to 6 ...

... would give the following result :

这篇关于如何在 chartjs 2.0 中隐藏 x 轴之后的值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-19 03:53
查看更多