HighCharts生成表

时间:2012-10-14 22:14:38

标签: highcharts formatting

我真的需要帮助。

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

在这个Fiddle表生成好了,但我需要数据值是文本,而不是数字格式。

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

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

有可能实现这个目标吗?

1 个答案:

答案 0 :(得分:5)

您无法用文本替换数据值并将其显示的原因是您将数据类型定义为十进制并使用Highcharts.numberFormat将y值转换为小数。由于您尝试放入文本,因此无法将字符串格式化为十进制,因此它为null。现在,您不能简单地取出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语法,但您明白了这一点。)