Question

使用Highcharts，当类型为datetime时，是否可以向轴添加其他类别？

    Highcharts.chart('container', {

    chart: {
        pankey:'shift',
        panning:true,
        type: 'column',
        zoomType:'xy'
    },
    series: {
       allowPointSelect: true,
       cursor: 'pointer',
       stacking: 'normal',
    },
    xAxis: {
        type:'datetime',
        dateTimeLableFormats:{
            day:'%e. %b',
          hour:'%H',
          month:'%b \'%Y',
          year:'%Y'
        }
    },
series: [{
        data: [
        [1451606400000, 179594.83],
        [1454284800000, 176105.09],
        [1456790400000, 195630.06],
        [1459468800000, 183081.82],
        [1462060800000, 187955.4],
        [1464739200000, 187483.48],
        [1467331200000, 318999.15],
        [1470009600000, 176279.28],
        [1472688000000, 74438.96]
        ],
        name: 'Cost',
        stack: 'Cost'
    },
    {
        data: [
        [1451606400000, 179594.83],
        [1454284800000, 176105.09],
        [1456790400000, 195630.06],
        [1459468800000, 183081.82],
        [1462060800000, 187955.4],
        [1464739200000, 187483.48],
        [1467331200000, 318999.15],
        [1470009600000, 176279.28],
        [1472688000000, 74438.96]
        ],
        name: 'Cost',
        stack: 'Cost1'
   }],
   tooltip: {
        crosshairs: true,
      headerFormat:'<b>{point.x:%e. %b} : {series.options.stack}</b>',
      pointFormat:'<b>{point.name}: </b> {point.y}<br><b>Total: </b>{point.total}'
   }


});

示例jsfiddle ：this document and it says

希望看到堆栈名称Cost1＆amp; Cost2，显示在x轴上。这个jsfiddle数据只是一个示例，后面的代码可以生成许多具有不同堆栈名称的系列名称。

相关链接：https://jsfiddle.net/m1yoga/kby5973t/

Answer 1

玩弄小提琴，让它发挥作用。

$(function () {
var ugly = ['apples','oranges'];
    var cats = ugly.concat(ugly).concat(ugly).concat(ugly).concat(ugly);
    var zeroes = [];
    cats.forEach(function () {zeroes.push(0);}); 

var options = {

    chart: {
        pankey:'shift',
        panning:true,
        type: 'column',
        zoomType:'xy'
    },
   series: {
       allowPointSelect: true,
       cursor: 'pointer',
       stacking: 'normal',
   },
   xAxis: [
   {
        categories:cats,
        lineColor:'#ffffff'
   },
   {
            type:'datetime',
        dateTimeLableFormats:{
            day:'%e. %b',
          hour:'%H',
          month:'%b \'%Y',
          year:'%Y'
        }
   }
   ],

   series: [{
            id: 'cost',
        data: [
        [1451606400000, 179594.83],
        [1454284800000, 176105.09],
        [1456790400000, 195630.06],
        [1459468800000, 183081.82],
        [1462060800000, 187955.4],
        [1464739200000, 187483.48],
        [1467331200000, 318999.15],
        [1470009600000, 176279.28],
        [1472688000000, 74438.96]
        ],
        name: 'Cost',
        stack: 'Cost',
        xAxis: 1
    },
    {
        linkedTo: 'cost',
        data: [
        [1451606400000, 179594.83],
        [1454284800000, 176105.09],
        [1456790400000, 195630.06],
        [1459468800000, 183081.82],
        [1462060800000, 187955.4],
        [1464739200000, 187483.48],
        [1467331200000, 318999.15],
        [1470009600000, 176279.28],
        [1472688000000, 74438.96]
        ],
        name: 'Cost',
        stack: 'Cost1',
        xAxis:1
   },
   {
            name: '',
            data: zeroes,
            showInLegend: false,
            stack: '2015',

        }
   ],
   tooltip: {
        crosshairs: true,
      headerFormat:'<b>{point.x:%e. %b} : {series.options.stack}</b>',
      pointFormat:'<b>{point.name}: </b> {point.y}<br><b>Total: </b>{point.total}'
   }

};

    $('#container').highcharts(options);
});

这是小提琴： https://jsfiddle.net/m1yoga/afu3s3sj/3/

高图轴日期时间+类别

1 个答案: