HighChart-按天分组数据

时间：2018-11-16 20:03:42

标签： javascript highcharts

我有一个包含3个系列的图形，每个系列有4个点。这些点中的每个点对应于4个不同的天（每天一个点）。就是说，由于它们是3个系列，因此每天总共有3分。但是这3点在小时，分钟和秒上有所不同。

我要做的是将此数据保留在X轴上以在工具提示中显示，但3个点已对齐。

让我们通过示例进行展示。

这是我目前拥有的：

    chart = new Highcharts.StockChart({

        chart: {
            renderTo: "container",
            type: 'spline'
        },

        colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
            '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],

        yAxis: {
            opposite: false,
            showLastLabel: true,
            labels: {
                enabled: true,
                align: "right"
            },

            title: {
                text: 'Tensión'
            }
        },

        rangeSelector: {
            enabled:  true
        },

        tooltip: {
            pointFormatter: function () {
                var n = this.series.name;
                var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
                    return s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
            }
        },

        legend: {
            enabled: true
        },

        navigation: {
            buttonOptions: {
                enabled: true
            }
        },

        series: [{"name":"Minima","pointInterval":86400000,"data":[[1538467200000,215.9],[1538581500000,217.6],[1538651700000,218],[1538728200000,218.5]]},{"name":"Maxima","pointInterval":86400000,"data":[[1538506800000,228.8],[1538530200000,228.4],[1538676000000,229.3],[1538779500000,228.8]]},{"name":"Promedio","pointInterval":86400000,"data":[[1538438400000,223.9365],[1538524800000,224.0667],[1538611200000,224.4135],[1538697600000,224.45]]}]
    });

http://jsfiddle.net/ZottoSL/8vedjxLs/5/

这就是我想要的（我修改了数据中的X点以实现视觉效果，但实际上我想保留它）：

    chart = new Highcharts.StockChart({

        chart: {
            renderTo: "container",
            type: 'spline'
        },

        colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
            '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],

        yAxis: {
            opposite: false,
            showLastLabel: true,
            labels: {
                enabled: true,
                align: "right"
            },

            title: {
                text: 'Tensión'
            }
        },

        rangeSelector: {
            enabled:  true
        },

        tooltip: {
            pointFormatter: function () {
                var n = this.series.name;
                var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>';
                    return s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
            }
        },

        legend: {
            enabled: true
        },

        navigation: {
            buttonOptions: {
                enabled: true
            }
        },

        series: [{"name":"Minima","pointInterval":86400000,"data":[[1538438400000,215.9],[1538524800000,217.6],[1538611200000,218],[1538697600000,218.5]]},{"name":"Maxima","pointInterval":86400000,"data":[[1538438400000,228.8],[1538524800000,228.4],[1538611200000,229.3],[1538697600000,228.8]]},{"name":"Promedio","pointInterval":86400000,"data":[[1538438400000,223.9365],[1538524800000,224.0667],[1538611200000,224.4135],[1538697600000,224.45]]}]
    });

http://jsfiddle.net/ZottoSL/9bk8hq3n/1/

也就是说，在X轴上绘制图形时，只考虑年，月和日，区分小时，分钟和秒。

谢谢！

2 个答案:

答案 0 :(得分：1)

您可以使用dataGrouping获得所需的外观。这样，您无需进行任何额外的处理。您需要做的就是给出以下定义：

@Bean
public PlatformTransactionManager transactionManager() {
  ...
}

要在工具提示中获取该点的实际时间，您可以执行以下操作：

DefaultDatasourceConfiguration

DefaultDatasourceConfiguration获取该点的实际时间。

工作中的JSFiddle示例： http://jsfiddle.net/ewolden/omfdy8nc/

关于dataGrouping的API： https://api.highcharts.com/highstock/series.line.dataGrouping

要消除每天进行dataGrouping时可能在序列之前或之后的额外时间，我们需要设置一个最小值和最大值。之所以会有这样的空格，是因为原始数据的值并非每天午夜都准确设置。

添加以下plotOptions: { series: { dataGrouping: { forced: true, units: [ ['day', [1]] ] } } }, 事件将找到最小/最大全天，并将tooltip: { pointFormatter: function() { var n = this.series.name; var s = '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'; return Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index]) + s + Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>'; } }, 和导航器Highcharts.dateFormat('%m/%d - %H:%M', this.series.xData[this.index])设置为以下值：

load

工作示例： http://jsfiddle.net/ewolden/omfdy8nc/32/

关于加载事件的API： https://api.highcharts.com/highstock/chart.events.load

图表上的API。更新： https://api.highcharts.com/class-reference/Highcharts.Chart#update

答案 1 :(得分：0)

您可以在同一天对每个点使用相同的时间戳记作为x属性，并将实际时间戳记保存在标记点对象中，例如作为realX。然后在tooltip.pointFormatter中使用实时时间戳创建显示每个点的真实日期。请查看下面发布的示例。

HTML：

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JS：

var data = [{
    name: "Minima",
    pointInterval: 86400000,
    data: [
      [1538467200000, 215.9],
      [1538581500000, 217.6],
      [1538651700000, 218],
      [1538728200000, 218.5]
    ]
  }, {
    name: "Maxima",
    pointInterval: 86400000,
    data: [
      [1538506800000, 228.8],
      [1538530200000, 228.4],
      [1538676000000, 229.3],
      [1538779500000, 228.8]
    ]
  }, {
    name: "Promedio",
    pointInterval: 86400000,
    data: [
      [1538438400000, 223.9365],
      [1538524800000, 224.0667],
      [1538611200000, 224.4135],
      [1538697600000, 224.45]
    ]
  }],
  finalData = [],
  i,
  j,
  series,
  point;

for (i = 0; i < data.length; i++) {
  series = data[i];
  finalData[i] = {
    name: series.name,
    pointInterval: series.pointInterval,
    data: []
  };

  for (j = 0; j < series.data.length; j++) {
    point = series.data[j];

    finalData[i].data.push({
      x: data[0].data[j][0],
      y: point[1],
      realX: point[0]
    });
  }
}

chart = new Highcharts.StockChart({

  chart: {
    renderTo: "container",
    type: 'spline'
  },

  colors: ['#3131F8', '#FB1C1C', '#008000', '#f7a35c', '#8085e9',
    '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'
  ],

  yAxis: {
    opposite: false,
    showLastLabel: true,
    labels: {
      enabled: true,
      align: "right"
    },

    title: {
      text: 'Tensión'
    }
  },

  rangeSelector: {
    enabled: true
  },

  tooltip: {
    pointFormatter: function() {
      var n = this.series.name,
        s = '<span style="color:' + this.series.color + '">' + n + '</span>: <b>',
        date = 'Date: ' + Highcharts.dateFormat('%e. %b %H:%M', this.realX),
        number = Highcharts.numberFormat((this.y / 1000), 2, '.') + ' kV</b><br/>';
      return s + number + date;
    }
  },

  legend: {
    enabled: true
  },

  navigation: {
    buttonOptions: {
      enabled: true
    }
  },

  series: finalData
});

演示： https://jsfiddle.net/BlackLabel/qfv1yzmh/1/

相关问题
最新问题