HighCharts 生成的表格

Question

我真的需要这方面的帮助。

基于 this question我正在尝试从 High-charts 生成表格。

在此Fiddle表生成正常，但我需要数据值是文本格式，而不是数字格式。

我认为需要在这一行更改格式，但我不确定...

Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix, 

这有可能实现吗？

Answer 1

您无法用文本替换数据值并显示它的原因是因为您将数据类型定义为十进制并使用 Highcharts.numberFormat 将 y 值转换为十进制。由于您尝试输入文本，因此它无法将字符串格式化为小数，因此它为空。现在，您不能简单地取出 Highcharts.numberFormat 调用并让这项工作生效。 HighCharts 数据系列需要一个数字 y 值。因此，为了执行您想要的操作，我们使用名为 Note 的未记录的点属性。

这是我的尝试。如果您只想使用 HighCharts 在 SVG/VML 中创建表格，您可以执行以下操作。像这样创建一个数据系列:

{
        name: 'Tokyo',
        data: [{
            y: 7.0,
            Note: 'note 1'},
        {
            y: 6.9,
            Note: 'note 2'},
        {
            y: 9.5,
            Note: 'note 3'},
        {
            y: 14.5,
            Note: 'note 4'},
        {
            y: 18.2,
            Note: 'note 5'},
        {
            y: 21.5,
            Note: 'note 6'},
        {
            y: 25.2,
            Note: 'note 7'},
        {
            y: 26.5,
            Note: 'note 8'},
        {
            y: 23.3,
            Note: 'note 9'},
        {
            y: 18.3,
            Note: 'note 10'},
        {
            y: 13.9,
            Note: 'note 11'},
        {
            y: 9.6,
            Note: 'note 12'}
                                        ],
        visible: false}

现在，不是循环 y 值，而是循环遍历 Note 项目，就像以前一样，只是删除了数字内容:

$.each(series, function(i) {
    renderer.text(series[i].data[category_index].Note, cellLeft + colWidth - cellPadding, tableTop + (i + 2) * rowHeight - cellPadding).attr({
        align: 'right'
    }).add();
});

这是一个jsFiddle (仅更新了一个系列以使用 Note 语法，但您明白了)。