堆叠列未在 x 轴上格式化时间戳到日期

Question

我用高图创建了一个简单的堆叠柱形图。我在这里处理了相当于高图表示例的数据：https://www.highcharts.com/demo/column-stacked 唯一的区别是我在 x 轴上有 unix 时间戳问题：我的时间戳没有正确转换为日期格式：%Y-%m-%d 这是jsfiddle： https://jsfiddle.net/marialaustsen/e8d5snzt/

$(function() {
  Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
  }, null, document.getElementsByTagName('head')[0]);

  Highcharts.theme = {
    colors: ['#79ea61', '#2b908f', '#F09448', '#6E8CD0', '#aaeeee', '#ff0066',
      '#f45b5b', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee', '#eeaaee'
    ],
    chart: {
      backgroundColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 1,
          y2: 1
        },
        stops: [
          [0, '#152036'],
          [1, '#1b2a47']
        ]
      },
      style: {
        fontFamily: '\'Unica One\', sans-serif'
      },
      plotBorderColor: '#1b2a47'
    },
    title: {
      style: {
        color: '#E0E0E3',
        textTransform: 'uppercase',
        fontSize: '20px'
      }
    },
    subtitle: {
      style: {
        color: '#E0E0E3',
        textTransform: 'uppercase'
      }
    },
    xAxis: {
      gridLineColor: '#546c9b',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#546c9b',
      minorGridLineColor: '#546c9b',
      tickColor: '#546c9b',
      title: {
        style: {
          color: '#E0E0E3'

        }
      }
    },
    yAxis: {
      gridLineColor: '#546c9b',
      labels: {
        style: {
          color: '#E0E0E3'
        }
      },
      lineColor: '#707073',
      minorGridLineColor: '#505053',
      tickColor: '#707073',
      tickWidth: 1,
      title: {
        style: {
          color: '#A0A0A3'
        }
      }
    },
    tooltip: {
      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
        color: '#F0F0F0'
      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          color: '#E0E0E3'
        },
        marker: {
          lineColor: '#333'
        }
      },
      boxplot: {
        fillColor: '#505053'
      },
      candlestick: {
        lineColor: 'white'
      },
      errorbar: {
        color: 'white'
      }
    },
    legend: {
      itemStyle: {
        color: '#E0E0E3'
      },
      itemHoverStyle: {
        color: '#FFF'
      },
      itemHiddenStyle: {
        color: '#1b2a47'
      }
    },
    credits: {
      style: {
        color: '#E0E0E3'
      }
    },
    labels: {
      style: {
        color: '#E0E0E3'
      }
    },

    drilldown: {
      activeAxisLabelStyle: {
        color: '#F0F0F3'
      },
      activeDataLabelStyle: {
        color: '#F0F0F3'
      }
    },

    navigation: {
      buttonOptions: {
        symbolStroke: '#DDDDDD',
        theme: {
          fill: '#1b2a47',
          states: {
            hover: {
              fill: '#546c9b'
            },
            select: {
              fill: '#546c9b'
            }
          }
        }
      }
    },

    // scroll charts
    rangeSelector: {
      buttonTheme: {
        fill: '#1b2a47',
        stroke: '#000000',
        style: {
          color: '#E0E0E3'
        },
        states: {
          hover: {
            fill: '#546c9b',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          },
          select: {
            fill: '#071023',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          }
        }
      },
      inputBoxBorderColor: '#E0E0E3',
      inputStyle: {
        backgroundColor: '#152036',
        color: '#E0E0E3',
        fontWeight: 'bold',

        states: {
          hover: {
            fill: '#546c9b',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          },
          select: {
            fill: '#071023',
            stroke: '#000000',
            style: {
              color: '#FFFFFF'
            }
          }
        }
      },
      labelStyle: {
        color: '#E0E0E3'
      }
    },

    navigator: {
      handles: {
        backgroundColor: '#1b2a47',
        borderColor: '#7798BF',
      },
      outlineColor: '#546c9b',
      maskFill: 'rgba(255,255,255,0.1)',
      series: {
        color: '#7798BF',
        lineColor: '#546c9b'
      },
      xAxis: {
        gridLineColor: '#546c9b',
        labels: {
          style: {
            color: '#FFF',
            fontWeight: 'bold'
          }
        }

      },

    },

    scrollbar: {
      barBackgroundColor: '#1b2a47',
      barBorderColor: '#1b2a47',
      buttonArrowColor: '#FFF',
      buttonBackgroundColor: '#1b2a47',
      buttonBorderColor: '#1b2a47',
      rifleColor: '#FFF',
      trackBackgroundColor: '#152036',
      trackBorderColor: '#152036'
    },

    // special colors for some of the
    /*legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: '#505053',
    dataLabelsColor: '#B0B0B3',
    textColor: '#FFF',
    contrastTextColor: '#F0F0F3',
    maskColor: 'rgba(255,255,255,0.3)'*/
  };

  // Apply the theme
  Highcharts.setOptions(Highcharts.theme);
  var chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container',
      type: 'column'
    },
    title: {
      text: 'Probability above 1.5'
    },
    subtitle: {
      text: 'Prob most of the time 0 but in the early 2010 will start to have a shade going above'
    },
    xAxis: {
      type: 'datetime',
      labels: {
        format: '{value:%Y-%m-%d}'
      },
      tickInterval: 24 * 3600 * 1000,
    },

    yAxis: {
      min: 0,
      max: 1.5,
      title: {
        text: 'Temperature'
      }
    },
    tooltip: {
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f} C</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0,
        stacking: 'normal'
      }
    },

    series: [{
      name: 'Timestamp',
      data: [-315622800000, -284000400000, -252400303000, -220864303000, -189328303000, -157705903000, -126169903000, -94633903000, -63097903000, -31475503000, 31596497000, 63132497000, 94754897000, 126290897000, 157826897000, 189362897000, 220985297000, 252521297000, 284057297000, 315593297000, 347215697000, 378751697000, 410287697000, 441823697000, 473446097000, 504982097000, 536518097000, 568054097000, 599676497000, 631212497000, 662748497000, 694220400000, 725842800000, 757378800000, 788914800000, 820450800000, 852073200000, 883609200000, 915145200000, 946681200000, 978303600000, 1009839600000, 1041375600000, 1072911600000, 1104534000000, 1136070000000, 1167606000000, 1199142000000, 1230764400000, 1262300400000, 1293836400000, 1325372400000, 1356994800000, 1388530800000, 1420066800000, 1451602800000, 1483225200000, 1514761200000, 1546297200000, 1577833200000]
    }, {
      name: 'Noneprobability',
      data: [1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.4, 1.3, 1.2, 1.1, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4]
    }, {
      name: 'Probability',
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1]
    }]
  })
});

Answer 1

您必须调整您的系列数据结构以适应 Highcharts 要求的格式。例如，您可以使用数组：data: [[0, 6], [1, 2]]，其中第一个值表示图表上的 x，第二个值表示 y：

因此，在您的示例中：

var timestamps = [-315622800000, -284000400000, ...];

...

var chart = new Highcharts.Chart({

    ...,

    series: [{
        name: 'Noneprobability',
        data: (function() {
            var data = [1.5, 1.5, ...];

            data = data.map(function(el, i) {
                return [timestamps[i], el]
            });

            return data
        })()
    }, ...]
})

现场演示： https://jsfiddle.net/BlackLabel/71wy5xzf/

API参考：https://api.highcharts.com/highcharts/series.column.data

堆叠列未在 x 轴上格式化时间戳到日期

Stacked column does not format timestamp to date on x axis

unix-timestamp

highcharts

stacked-chart

dateformatter