前端之家

  1. 首页
  2. 问答

不要在ChartJS折线图中以条件绘制线

• 问答

触发条件后，我不想在两个点之间画线。

我正在使用chartjs作为时间线图。

我的条件是当y值减小时不画线，因此在此示例中，当其值从7变为1时

{x:3.5*3600,y:7},Do not draw line between these two points
{x:4*3600,y:1},

是否可以使用chartjs线形时间图？

var canvas = document.getElementById('myChart');
var config = {
  "options": {
    "scales": {
      "xAxes": [
            {
              "type": 'time',"time": {
                "unit": 'minute',"unitStepSize": 60,},"distribution": 'linear',"bounds": 'ticks',"ticks": {
                "source": 'auto',"autoSkip": true,"stepSize": 10
              }
            }
          ],"data": {
  	"labels": ['2016-04-18T00:00:00Z','2016-04-18T23:59:00Z'],"datasets": [
    {
      "label": "line","type": "line","backgroundColor": "#00b","borderColor": "#00b",//"yAxisID": "axis4","borderWidth": 1,"fill": false,"data": [
{x:"2016-04-18T01:00:00Z",{x:"2016-04-18T04:00:00Z",y:2},{x:"2016-04-18T06:00:00Z",y:3},{x:"2016-04-18T08:00:00Z",{x:"2016-04-18T10:00:00Z",{x:"2016-04-18T14:00:00Z",]
    },]
  },};
var myBarChart = Chart.Line(canvas,config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

更新 我尝试在两个项目之间添加{x:null,y:null}或null，但出现此错误

Error: 0 and 1461023970000 are too far apart with stepSize of 60 minute

我的选择是：

"data": [
  {x:"2016-04-18T01:00:00Z",{x:null,y:null},]

... 

xAxes: [
    {
      type: 'time',time: {
        unit: 'minute',unitStepSize: 60,parser: function(date) {
          return moment(date).toLocaleString();
        }
      },distribution: 'linear',bounds: 'ticks',ticks: {
        source: 'auto',autoSkip: true,stepSize: 10
      }
    }
  ],

就像chartjs认为null为大值一样

lianguan 回答：不要在ChartJS折线图中以条件绘制线

如Chart.js文档中所述（请参见spanGaps），如果internal class Program { private static void Main(string[] args) { string path = @"pathToJsonr.json"; var d = new DeserializeClass<List<Person>>().Deserialize<List<Person>>(path); System.Console.WriteLine(d[0].Name); } } internal class DeserializeClass<T> { internal T Deserialize<T>(string filename) { using (var sr = new StreamReader(filename)) { using (var jsonReader = new JsonTextReader(sr)) { var serializer = new JsonSerializer(); return serializer.Deserialize<T>(jsonReader); } } } } internal class Person { public string CarPlateNumber { get; set; } public int Id { get; set; } public string Name { get; set; } public string Password { get; set; } public string Phone { get; set; } } [ { "CarPlateNumber": "A823BX750","Id": 2,"Name": "Peter Peterson","Password": "qwasdty","Phone": "+79162314312" } ] 虚假（默认），则具有spanGaps数据的点将在行中产生中断。 / p>

因此，诀窍是像您尝试的那样插入一个空白点。这个空点必须加盖时间戳，两点之间的时间戳记定义该行中的“孔”：

NaN

以这个小提琴为例：https://jsfiddle.net/t1s54gdh/

,

将y设置为null，同时仍定义x坐标。 

"data": [
  {x:"2016-04-18T01:00:00Z",y:1},{x:"2016-04-18T04:00:00Z",y:2},{x:"2016-04-18T06:00:00Z",y:3},{x:"2016-04-18T08:00:00Z",y:7},{x:"2016-04-18T08:00:01Z",y:null},{x:"2016-04-18T10:00:00Z",{x:"2016-04-18T14:00:00Z",]
chart.jschartjs-2.6.0domjavascript
本文链接：https://www.f2er.com/3049276.html

大家都在问