Question

我使用Highcharts.visualize从包含数据的表中绘制图表。

您可以在此处测试我的工作代码：http://jsfiddle.net/S2XM8/1/

我有两个问题：

我希望为我的＆＃34;附加价值＆＃34;提供单独的样式。我该怎么做呢？

我可以通过javascript添加X轴数据吗？例如，如果我需要在表格中填写2014-05-27和2014-05-25之间的差距。

Highcharts.visualize = function (table, options, tableClass) {
    // the categories
    options.xAxis.categories = [];
    $('tbody th', table).each( function () {
        options.xAxis.categories.push(this.innerHTML);
    });

    // the data series
    options.series = [];
    $('tr', table).each( function (i) {
        var tr = this;
        $('.graph', tr).each( function (j) {
            if (i === 0) { // get the name and init the series
                options.series[j] = {
                    name: this.innerHTML,
                    data: []
                };
            } else { // add values
                options.series[j].data.push(parseFloat(this.innerHTML));
                console.log(this.innerHTML);
            }
        });
    });

    options.title = { text: 'Some graph' };

    $('#' + tableClass + '-graph').highcharts(options);
};

var tableNumber = document.getElementById('rank-table'),

options = {
    chart: {
        zoomType: 'x'
    },
    xAxis: {
        tickInterval: 30,
        reversed: true,
        labels: {
            rotation: 45
        },
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        }
    },
    yAxis: {
        title: {
            text: 'Rank'
        },
        min: 1,
        reversed: true
    },
    legend: {
        layout: 'vertical',
        align: 'middle',
        verticalAlign: 'bottom',
        borderWidth: 0
    }
};

Highcharts.visualize(tableNumber, options, 'number');

Answer 1

这两件事都有可能，但需要修改visualize方法，请参阅：http://jsfiddle.net/S2XM8/4/

您可以在图表中设置系列选项，然后与数据合并：

series: [{
    // nothing special
}, {
   type: 'column' // set series type for example
}]

合并：

            options.series[j] = options.series[j] || {};
            options.series[j].name = this.innerHTML,
            options.series[j].data = [];

在作为点值传递之前检查已解析的值：

            var value = parseFloat(this.innerHTML);

            if(isNaN(value)) { //null value - produces NaN when parsing
                options.series[j].data.push(10);
            } else {
                options.series[j].data.push(value); // push value to the series
            }

Highcharts可视化，风格系列

1 个答案: