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

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

highcharts ruby-on-rails

Qumber Ali · 技术社区 · 6 年前

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 年前

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

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/

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/