在图表上仅显示第一个和最后一个y轴标签

基斯·德·杰格

对于图形,我只想显示属于第一个值和最后一个值的标签。

我试图通过事件触发器获取最后一个值。不幸的是,这仅适用于最后一个值,而不适用于第一个值。我也不知道如何在两个系列中都这样做。到目前为止,我只管理系列[0]。

  chart: {
    type: 'line',
    events: {
      load: function() {
        var chart = this,
          points = chart.series[0].points,
          lastValue,
          chosenPointlast;

        points.forEach(function(point, index) {
          if (!lastValue || lastValue < point.x) {
            lastValue = point.x;
            chosenPointlast = point;
          }
        }); 

        chosenPointlast.update({
          marker: {
            enabled: true,
            fillColor: 'orange'
          },
          dataLabels: {
            enabled: true,
            color: 'orange'
          },
        });
      }
    }
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  plotOptions: {
    line: {
      dataLabels: {
        enabled: false
      },
      enableMouseTracking: false
    }
  },
  series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'London',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});

因此,我希望看到系列[0]的标签7.0和9.6,以及系列[1]的标签3.9和4.8。希望你能帮助我。JSFiddle

吉格

您可以通过以下方式找到一个系列的4个边缘点:

const pointsSortedByY = serie.points.sort((p1, p2) => p2.y - p1.y);
const top = pointsSortedByY[0];
const bottom = pointsSortedByY[pointsSortedByY.length - 1];

const pointsSortedByX = serie.points.sort((p1, p2) => p2.x - p1.x);
const first = pointsSortedByX[0];
const last = pointsSortedByX[pointsSortedByX.length - 1];

然后可以打印它:

[top,bottom, first, last].forEach(function (point) {
    point.update({
        marker: {
            enabled: true,
            fillColor: 'green'
        },
        dataLabels: {
            enabled: true,
            color: 'green'
        }
    });
},this);

最后对每个系列重复相同的操作:

chart1.series.forEach(function (serie) {
    printTopAndBottom(serie);
}, this);

结果如下: 结果

https://jsfiddle.net/7ue8ow0b/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Chartjs仅显示第一个和最后一个x轴标签

仅使用Mpchart在android中显示的第一个和最后一个标签

仅显示产品分类的第一个和最后一个术语

仅在Highcharts中显示第一个和最后一个xAxis标签

移除y轴的第一个标签

在d3图表上拖动时仅更新最后一个Y轴

matplotlib没有在条形图的x轴上显示第一个标签

Flot Chart-如何使用minTickSize在x轴上显示第一个和最后一个月:[2,“ month”]

awk在逗号分隔的字段上仅保留第一个和最后一个值

ASP.NET C#页上仅未显示第一个标签

仅循环第一个和最后一个元素

使用“ sed”仅替换第一个和最后一个匹配项

JavaFX - 仅样式第一个和最后一个选项卡

sed仅替换行中的第一个和最后一个空格

Javascript替换第一个和最后一个字体标签

在末尾的双向链表添加节点仅在printf上显示第一个和最后一个节点

AngularJs显示过滤列表的第一个和最后一个

Jassor:显示箭头的第一个和最后一个图像

Ruby 开关,只显示第一个和最后一个

PySpark在分区上的第一个和最后一个功能

垂直滚动,第一个和最后一个孩子在屏幕上居中

X轴标签左对齐,X轴上的第一个刻度文本

如何选择轴中的第一个和最后一个刻度标签并定义它之间的主要刻度数?

在图表js中增加x轴和第一个水平条之间的空间

在比 Excel 窗口宽的 Excel 图表中检测第一个和最后一个可见点

仅显示使用nth-child的第一个,第二个和最后一个孩子?

标签角显示第一个标签

如何隐藏第一个 y 轴值?

嵌套v-for仅显示Vue中第一个元素的最后一个子元素