来自带有线条系列的 HTML 表格的 Highchart 数据答案

【问题标题】：Highchart Data from HTML table with line series来自带有线条系列的 HTML 表格的 Highchart 数据
【发布时间】：2014-01-22 21:24:12
【问题描述】：

从 html 表格加载示例和示例

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-parsed/

我想使用它，但也允许不同的系列类型

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/

我正在考虑添加一个复选框列来指示行系列，但不确定如何正确地将其传递给此函数

data: {
    table: document.getElementById('datatable')
},

此功能/api 的任何其他链接也将不胜感激

【问题讨论】：

标签： highcharts

【解决方案1】：

为了在数据表中添加一些复选框，这需要付出很大的努力，但你就可以了。我利用data 选项的parsed 回调来解析复选框并从中设置系列类型：

      data: {
            table: document.getElementById('datatable'),
            parsed: function(){
                var checkBoxes = $('#typeRow input'); //find checkboxes
                for (var i = 0; i < checkBoxes.length; i++){
                    this.columns[i+1].pop(); // remove checkbox row, this will break highcharts parsing
                    if (checkBoxes[i].checked){                                           
                        this.chartOptions.series[i]['type'] = 'line'; //set the series type
                    }
                    else
                    {
                        this.chartOptions.series[i]['type'] = 'column';
                    }
                }
            }
        },

这是一个有效的fiddle。

【讨论】：

漂亮，正是我想要的——我不知道解析后的回调。我正在处理一个允许用户动态创建图表的页面 - 所有 tds 都将是输入或复选框。我目前的方法是使用角度，但它变得太麻烦了，特别是如果我可以利用直接从表格加载的能力，因为这基本上就是我使用角度的方式 - 模型是与数据等高图表相关联的表格行/列对象

【解决方案2】：

我不知道你想用那个复选框做什么，但通常你可以像这样预定义系列选项：

    series: [{
        yAxis: 0
    }, {
        type: 'spline',
        yAxis: 1
    }]

示例：http://jsfiddle.net/4mb9k/

【讨论】：