如何在Chartjs 2.0中隐藏超出x轴的值？ [英] How do I hide values past the x-axis in chartjs 2.0?

问题描述

如何在chartjs 2.0中隐藏x轴以外的值？您会注意到图表突出显示超过-60大关。 x轴使用时间刻度，我设置了最大值和最小值。

这是我的图表配置：

  {
 type： line，
 data：{
 datasets ：[
 {
 label：散射数据集，
数据：[
 {
 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：过去60秒内的水位 
}，
 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：{
回调：function（value，index，values）{
 return- +（ 60-5 *索引）； 
} 
} 
} 
]，
 yAxes：[
 {
 display：true，
刻度：{
 
} 
} 
] 
}，
 legend：{
 display：false 
} 
} 
} 
  

解决方案

您可以使用

...将给出以下结果：

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轴的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！