Highcharts，两个图形序列点之间的算术运算

时间：2018-05-01 06:01:35

标签： javascript highcharts

假设我在图中显示了这两个系列。我尝试做的是将图表上相同区间内的用户和会话值划分，并在悬停时显示。

这里是演示代码，下面是小提琴链接。

Highcharts.chart('container', {

    chart: {
        scrollablePlotArea: {
            minWidth: 700
        }
    },

    data: {
        csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
            '057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
        beforeParse: function (csv) {
            return csv.replace(/\n\n/g, '\n');
        }
    },

    title: {
        text: 'Daily sessions at www.highcharts.com'
    },

    subtitle: {
        text: 'Source: Google Analytics'
    },

    xAxis: {
        tickInterval: 7 * 24 * 3600 * 1000, // one week
        tickWidth: 0,
        gridLineWidth: 1,
        labels: {
            align: 'left',
            x: 3,
            y: -3
        }
    },

    yAxis: [{ // left y axis
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],

    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },

    tooltip: {
        shared: true,
        crosshairs: true
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {

            },
            marker: {
                lineWidth: 1
            }
        }
    },

    series: [{
        name: 'All sessions',
        lineWidth: 4,
        marker: {
            radius: 4
        }
    }, {
        name: 'New users'
    }]
    });

Fiddle

正如您在小提琴中看到的那样，如果您将图表悬停，则可以看到当天的会话和用户值。我还可以添加会话/用户比率吗？

我似乎无法在文档中找到相关示例。任何提示都是适当的。

2 个答案:

答案 0 :(得分：1)

您可能需要自己创建工具提示。有一种formatter()方法让我们创建一个我们想要的工具提示。 

formatter: function() { 
  var tooltip = '<span style="font-size:10px">' + moment(this.x).format('dddd, MMM DD, YYYY') + '</span><br>';
  for (var i = 0; i < this.points.length; i++) {
    let point = this.points[i]
    tooltip += '<span style="color:' + point.series.color + '">●</span>';
    tooltip += point.series.name + ': ';
    tooltip += '<b>' + point.y + '</b><br>';
  }
  let ratio = (this.points[1].y / this.points[0].y).toFixed(2);
  tooltip += '<span>Ratio: <b>' + ratio + '</b></span>'
  return tooltip;
},

我使用 moment.js 格式化日期时间，this.x这是自1970年1月1日UTC以来的毫秒数。

moment(this.x).format('dddd, MMM DD, YYYY') 

Highcharts.chart('container', {

  chart: {
    scrollablePlotArea: {
      minWidth: 700
    }
  },

  data: {
    csvURL: 'https://cdn.rawgit.com/highcharts/highcharts/' +
      '057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/analytics.csv',
    beforeParse: function(csv) {
      return csv.replace(/\n\n/g, '\n');
    }
  },

  title: {
    text: 'Daily sessions at www.highcharts.com'
  },

  subtitle: {
    text: 'Source: Google Analytics'
  },

  xAxis: {
    tickInterval: 7 * 24 * 3600 * 1000, // one week
    tickWidth: 0,
    gridLineWidth: 1,
    labels: {
      align: 'left',
      x: 3,
      y: -3
    }
  },

  yAxis: [{ // left y axis
    title: {
      text: null
    },
    labels: {
      align: 'left',
      x: 3,
      y: 16,
      format: '{value:.,0f}'
    },
    showFirstLabel: false
  }, { // right y axis
    linkedTo: 0,
    gridLineWidth: 0,
    opposite: true,
    title: {
      text: null
    },
    labels: {
      align: 'right',
      x: -3,
      y: 16,
      format: '{value:.,0f}'
    },
    showFirstLabel: false
  }],

  legend: {
    align: 'left',
    verticalAlign: 'top',
    borderWidth: 0
  },

  tooltip: {
    formatter: function() { 
      var tooltip = '<span style="font-size:10px">' + moment(this.x).format('dddd, MMM DD, YYYY') + '</span><br>';
      for (var i = 0; i < this.points.length; i++) {
        let point = this.points[i]
        tooltip += '<span style="color:' + point.series.color + '">●</span>';
        tooltip += point.series.name + ': ';
        tooltip += '<b>' + point.y + '</b><br>';
      }
      let ratio = (this.points[1].y / this.points[0].y).toFixed(2);
      tooltip += '<span>Ratio: <b>' + ratio + '</b></span>'
      return tooltip;
    },
    shared: true,
    crosshairs: true
  },

  plotOptions: {
    series: {
      cursor: 'pointer',
      point: {

      },
      marker: {
        lineWidth: 1
      }
    }
  },

  series: [{
    name: 'All sessions',
    lineWidth: 4,
    marker: {
      radius: 4
    }
  }, {
    name: 'New users'
  }]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

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

答案 1 :(得分：0)

检查tooltip.formatter 

  tooltip: {
    shared: true,
    crosshairs: true,
    formatter: function() {
      var points = this.points;
      var str = '<span style="font-size:.85em">' + Highcharts.dateFormat('%A %b %e, %Y',
        new Date(points[0].x)) + '</span><br>'
      points.map((el) => {
        str += '<span style="color:' + el.color + '">\u25CF</span> ' + el.series.name + ': <b>' + el.y + '</b><br/>'
      })
      str += '<span style="color:red">\u25CF</span> ' + points[0].series.name + '/' + points[1].series.name + ': <b>' + (points[0].y / points[1].y).toFixed(2) + '</b><br/>'
      return str
    }
  },

Fiddle演示

相关问题
最新问题