Highcharts-vue - Using the tooltip / label formatter()

xesrikrc 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(159)

我以前使用标签格式化程序来定制图表中的 Y 轴标签，但是由于范围的原因，我不确定如何使用 highcharts-vue 来完成这一任务。

export default {
  data () {
    return {

      currencySymbol: '$',

      title: 'My Chart',
      points: [10, 0, 8, 2, 6, 4, 5, 5],
      chartType: 'Spline',
      chartOptions: {
        chart: {
          type: 'spline'
        },
        title: {
          text: 'Sin chart'
        },
        yAxis: {
          gridLineDashStyle: 'Dot',
          labels: {
              style: {
                  color: '#fff'
              },

              formatter: function () {
                  return this.currencySymbol + this.axis.defaultLabelFormatter.call(this)
              }

        },
        series: [{
          data: [10, 0, 8, 2, 6, 4, 5, 5],
          color: '#6fcd98'
        }]
      }
    }
  }

中的每一个
在完整的应用程序中， currencySymbol 属性会在 AJAX 调用的响应中更新。
有没有一个优雅的方式来实现这一点？

highcharts

来源：https://stackoverflow.com/questions/58028491/highcharts-vue-using-the-tooltip-label-formatter

1条答案

按热度按时间

mum43rcc1#

最推荐的方法是使用Computed Properties、JS Arrow function，并调用Highcharts.Axis.prototype.defaultLabelFormatter。
首先，我们需要将整个图表配置移到一个计算属性中，例如名为chartOptions。然后，我们只需要稍微重构格式化器函数，使其成为箭头函数，并创建带有组件数据中定义的符号的变量（！important）。之后，this关键字将在组件对象上指示：并通过调用在函数顶部创建的变量来直接引用符号。我准备了这个例子，所以请注意它。
示例：https://codesandbox.io/s/highcharts-vue-demo-icuzw
编码：

data() {
    return {
      currencySymbol: "$",
      title: "My Chart",
      points: [10, 0, 8, 2, 6, 4, 5, 5],
      chartType: "Spline"
    };
  },
  computed: {
    chartOptions() {
      var symbol = this.currencySymbol;

      return {
        chart: {
          type: "spline"
        },
        title: {
          text: "Sin chart"
        },
        yAxis: {
          gridLineDashStyle: "Dot",
          labels: {
            style: {
              color: "#000"
            },
            formatter: label => {
              return (
                symbol + Highcharts.Axis.prototype.defaultLabelFormatter.call(label)
              );
            }
          }
        },
        series: [
          {
            data: [10, 0, 8, 2, 6, 4, 5, 5],
            color: "#6fcd98"
          }
        ]
      };
    }
  }

此致！

赞(0）回复(0）举报 2022-11-10

我来回答

Highcharts-vue - Using the tooltip / label formatter()

1条答案

相关问题

热门标签

最新问答