Question

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

我正在使用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", 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-18T10:00:00Z", y:1},
{x:"2016-04-18T14:00:00Z", y:3},

]
    },
    ]
  },

};
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", 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:null,y:null},
  {x:"2016-04-18T10:00:00Z", y:1},
  {x:"2016-04-18T14:00:00Z", y:3},
]

...

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为大值一样

Answer 1

如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/

Answer 2

将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", y:1},
  {x:"2016-04-18T14:00:00Z", y:3},
]

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

2 个答案: