Highcharts TypeScript,y 轴标签

2024-02-05

请参考讨论Highcharts y 轴文本标签 https://stackoverflow.com/questions/4987457/highcharts-text-labels-for-y-axis设置y轴标签的方法。

I used https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts在我的 TypeScript 定义中,但我找不到定义 y 轴格式化程序的方法。

以前有人尝试过吗?

-- Update --

我原来的 JavaScript 代码是

var yearChartOptions = {
    yAxis: {
        plotLines: [{
            label: {
                formatter: function () {
                    return '$' + Highcharts.numberFormat(this.value/1000, 0) +'k ';
                }
            },
        }]
    },
};

// Create the chart
var yearChart = new Highcharts.Chart(yearChartOptions);

在代码中,我有一个 this.value ,它是每个条形图(我使用条形图)的值。在 TypeScript 中(我还没有更改为删除数组)。

    var yearChartOptions: HighchartsOptions = {};
    yearChartOptions.chart = {};
    yearChartOptions.yAxis = [];
    yearChartOptions.yAxis[0] = {};
    yearChartOptions.yAxis[0].plotLines = {};
    yearChartOptions.yAxis[0].plotLines.label = {};
    yearChartOptions.yAxis[0].plotLines.label.style.formatter(() => "$" + Highcharts.numberFormat(this.value / 1000, 0) + "k ");

    // Create the chart
    var yearChart = new Highcharts.Chart(yearChartOptions);

输出是

/*
Compile Error. 
See error list for details
 D:/MyProject/Scripts/test.ts(36,56): The property 'formatter' does not exist on value of type 'HighchartsCSSObject'
D:/MyProject/Scripts/test.ts(36,107): The property 'value' does not exist on value of type 'Dashboard'
*/

它不会编译。


Update - The 绝对类型化 Highcharts 定义 https://github.com/borisyankov/DefinitelyTyped/blob/master/highcharts/highcharts.d.ts现在我已经修复了,因此您可以下载最新版本,希望它能解决您的问题。

Highcharts 的类型定义建议您需要将 amd 选项数组传递给 yAxis。这会在 TypeScript 中编译。

var chart = new Highcharts.Chart({
    yAxis: [{
        labels: {
            formatter: function (): string {
                return 'My Label';
            }
        }
    }]
});

但是,我不确定这是否匹配文档,建议您将 yAxis 选项作为对象传递 http://api.highcharts.com/highcharts#yAxis,而不是作为许多这些对象的数组。从只有一个 yAxis 的角度来看,这也是有意义的。

为了实现我认为有效的版本(即不是数组):

/// <reference path="highchart.d.ts" />

var yearChartOptions: HighchartsOptions = {
    yAxis: {
        plotLines: {
            label: {
                formatter: function (): string {
                    return '$' + Highcharts.numberFormat(this.value / 1000, 0) + 'k ';
                }
            },
        }
    }
};


// Create the chart
var yearChart = new Highcharts.Chart(yearChartOptions);

您可以在此处调整您的 highchart.d.ts 文件...

interface HighchartsOptions {
    chart?: HighchartsChartOptions;
    // others...
    yAxis?: HighchartsAxisOptions; // <-- remove the [] from this line
}

我已向 Definely Typed 提交了拉取请求来解决此问题。

基于您的代码的完整工作示例:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts TypeScript,y 轴标签 的相关文章

随机推荐