代码之家  ›  专栏  ›  技术社区  ›  Qumber Ali

高图表:在图的末尾设置不常见的X轴值。

  •  0
  • Qumber Ali  · 技术社区  · 6 年前

    enter image description here

    2018-07-09 在第一个系列中不存在这就是为什么图形显示在图的末尾的点是错误的。

    My Series are:
    series: [{name: "Grouped rep_oos",
      data: 
       [{name: "2018-07-01", y: 1.1},
        {name: "2018-07-02", y: 2.02},
        {name: "2018-07-03", y: 3.85},
        {name: "2018-07-04", y: 0.0},
        {name: "2018-07-05", y: 2.6},
        {name: "2018-07-06", y: 1.06},
        {name: "2018-07-07", y: 2.86},
        {name: "2018-07-08", y: 0.98},
        {name: "2018-07-10", y: 4.94},
        {name: "2018-07-11", y: 4.21},
        {name: "2018-07-12", y: 6.32},
        {name: "2018-07-13", y: 2.73},
        {name: "2018-07-14", y: 1.08},
        {name: "2018-07-15", y: 1.08},
        {name: "2018-07-16", y: 0.0},
        {name: "2018-07-17", y: 0.78},
        {name: "2018-07-18", y: 0.0},
        {name: "2018-07-19", y: 3.95},
        {name: "2018-07-20", y: 2.9},
        {name: "2018-07-21", y: 3.64}],
      yAxis: 1,
      type: "line"},
     {name: "Grouped change_in_conversion_prior_period",
      data: 
       [{name: "2018-07-01", y: 37.44},
        {name: "2018-07-02", y: -56.74},
        {name: "2018-07-03", y: 30.89},
        {name: "2018-07-04", y: 12.55},
        {name: "2018-07-05", y: 52.73},
        {name: "2018-07-06", y: -41.49},
        {name: "2018-07-07", y: 47.71},
        {name: "2018-07-08", y: 18.54},
        {name: "2018-07-09", y: 53.38},
        {name: "2018-07-10", y: -48.15},
        {name: "2018-07-11", y: -57.37},
        {name: "2018-07-12", y: 116.67},
        {name: "2018-07-13", y: -53.5},
        {name: "2018-07-14", y: 102.76},
        {name: "2018-07-15", y: 91.67},
        {name: "2018-07-16", y: -30.68},
        {name: "2018-07-17", y: -27.08},
        {name: "2018-07-18", y: 100.0},
        {name: "2018-07-19", y: -26.32},
        {name: "2018-07-20", y: 2.28},
        {name: "2018-07-21", y: 15.8}],
      yAxis: 1,
      type: "line"}]
    
    3 回复  |  直到 6 年前
        1
  •  1
  •   Core972    6 年前

    您有两种解决方案:

    更改XAXIS.Type和日期格式 API Doc

    Highcharts.chart('container', {
        xAxis: {
            type: 'datetime'
        },
        ...
        series: [{
            name: "Grouped rep_oos",
                data: [
                    [1530403200000, 1.1],
                    [1530489600000, 2.02],
                    ...
    

    Fiddle

    为空和connectNulls添加空数据 API Doc

    data:[
        ...
        {name: "2018-07-09", y:null},
        ...],
    connectNulls: true,
    

    Fiddle

        2
  •  0
  •   ppotaczek    6 年前

    series: [{
        name: "Grouped change_in_conversion_prior_period",
        data: [{
                name: "2018-07-01",
                y: 37.44
            },
            {
                name: "2018-07-02",
                y: -56.74
            },
            ...
        ],
        type: "line"
    }, {
        name: "Grouped rep_oos",
        data: [{
                name: "2018-07-01",
                y: 1.1
            },
            {
                name: "2018-07-02",
                y: 2.02
            },
            ...
        ],
        type: "line"
    }]
    

    现场演示: http://jsfiddle.net/BlackLabel/2d4Lmraj/

        3
  •  0
  •   daniel_s    6 年前

    出现问题,因为您试图将日期作为类别名称传递( name: [string_value]

    解决方法是(正如@Core972之前所说的)设置 xAxis.type datetime

    function processData(data) {
      var processed = []
    
      data.forEach(function(series) {
        processed.push({
          name: series.name,
          data: series.data.map(data => {
            var myDate = data.name
            myDate = myDate.split("-").map(elem => { return parseInt(elem) });
    
            return [Date.UTC(myDate[0], myDate[1], myDate[2]), data.y]
          }),
          type: series.type
        })
      })
    
      return processed
    }
    

    上面的函数接受一个参数,即您的序列(当前结构为c.),并返回包含已处理序列对象的数组。

    实例: https://jsfiddle.net/h2rydgkc/