Question

我使用Highcharts来解析HTML表并从中生成柱形图。问题是，当我使用数字或日期之类的标题时，图表会添加“缺失”字样。年。

请参阅JSFiddle上的工作示例：http://jsfiddle.net/ng2yvq4o/1/

表格：

<table id="datatable">
<thead>
    <tr>
        <th></th>
        <th>Jane</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>2006</th>
        <td>3</td>
    </tr>
    <tr>
        <th>2008</th>
        <td>2</td>
    </tr>
    <tr>
        <th>2009</th>
        <td>5</td>
    </tr>
    <tr>
        <th>2011</th>
        <td>1</td>
    </tr>
    <tr>
        <th>2012</th>
        <td>2</td>
    </tr>
</tbody>
</table>

配置：

$('#container').highcharts({
    data: {
        table: 'datatable'
    },
    chart: {
        type: 'column'
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Units'
        }
    },
    plotOptions: {
        series: {
        connectNulls: false
      }
    }
});

我尝试使用connectNulls: false，但没有效果。

是否存在使2007年和2010年未出现在图表中的设置？我希望图表只使用HTML中的数据，不使用插值或其他任何内容。

希望你能帮忙！谢谢！

约翰

Answer 1

我找到了一个解决方案，使用complete回调修改名称并使用名称填充xAxis.categories：

请参阅：http://jsfiddle.net/ng2yvq4o/2/

$('#container').highcharts({
    data: {
        table: 'datatable',
        /**
         * Modify generated settings
         */
        complete: function (settings) {
            // We are going to create categories from each item in the series
          settings.xAxis = {
            categories: []
          };
          settings.series.map(function (series) {
              return series.data.map(function (series_item) {
                // Cast the item name to a string to prevent interpolation
              series_item[0] = String(series_item[0]);
              // Add the name to our categories:
              settings.xAxis.categories.push(series_item[0]);
              return series_item;
            });
          });
        }
    },
    chart: {
        type: 'column'
    },
    title: {
        text: 'Data extracted from a HTML table in the page'
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Units'
        }
    }
});

我希望其他人可以使用它！

问候，约翰

Highcharts柱形图，从数据表加载时禁用插值

1 个答案: