Question

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

这是我的图表配置：

{  
   "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
      }
   }
}

Answer 1

您可以使用Chart.js plugins实现此目的。它们允许您处理创建，更新或绘制图表时发生的事件。

在这里，您需要在图表初始化之前产生影响：

// 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);

插件基本上是循环数据，以删除不应显示的值。

您可以在live example on jsFiddle。

中看到此插件正常运行

例如，以下聊天时，分钟设置为2，最大值设置为6 ...

...会得到以下结果：

如何在chartjs 2.0中隐藏超过x轴的值？

1 个答案: