Question

我有一个简单的Flask应用程序，它将一系列闪烁的条形图与Highcharts.js一起生成到HTML表格中。我已经调整了Highcharts网页的示例代码来生成我的页面。基本上我的绘图功能与文档相同，只需稍加修改

function doChunk() {
    var time = +new Date(),
        i,
        len = $tds.length,
        $td,
        stringdata,
        arr,
        data,
        chart;

    for (i = 0; i < len; i += 1) {
        $td = $($tds[i]);
        stringdata = $td.data('sparkline');
        data = $.map(stringdata, parseFloat);
        chart = {};
        chart.type= 'column';
        $td.highcharts('SparkLine', {
            series: [{
                data: data,
                pointStart: 1,
            }],
            tooltip: {
                headerFormat: '<span style="font-size: 12px">' + $td.parent().find('th').html() + ', Amplicon {point.x}:</span><br/>',
                pointFormat: '<b>{point.y}</b>'
            },
            chart: chart
        });

        n += 1;

        // If the process takes too much time, run a timeout to allow interaction with the browser
        if (new Date() - time > 500) {
            $tds.splice(0, i + 1);
            setTimeout(doChunk, 0);
            break;
        }
    }
}
doChunk();

});

Flask模块读取ASCII文件，进行一些处理并将模板的HTML部分发送给绘图后发送的值。传递给data-sparkline对象的所有值都是列表

      {% for gene in gene_information %}
      <tr>
        <th>{{ gene }}</th>
        <td style="text-align:center">{{ gene_information[gene]['total_length'] }}</td>
        <td data-sparkline="{{ gene_information[gene]['min_coverage'] | string }}"/>
        <td data-sparkline="{{ gene_information[gene]['target_perc'] }}"/>
        <td data-sparkline="{{ gene_information[gene]['above_30'] }}">
        <td data-sparkline="{{ gene_information[gene]['zero'] }}">
    </tr>
  {% endfor %}

现在，根据Flask提供的值，将条件设置为条形颜色的最简单方法是什么？假设我想将默认条形颜色设为蓝色，但如果“above_30”列表值低于50，则条形变为红色？

提前致谢

Answer 1

感谢jlbriggs评论，我找到了正确的解决方案。我已经尝试在Sparkline函数的选项部分添加一个区域但是没有用。必须将区域部分添加到创建值系列时的doChunk（）函数中，作为Highcharts.Sparkline函数的参数

$td.highcharts('SparkLine', {
            series: [{
                data: data,
                pointStart: 1,
                zoneAxis: 'y',
                zones: [{
                    value: 99,
                 color: '#FF1811'
            }],
            }],
            tooltip: {
                headerFormat: '<span style="font-size: 12px">' + $td.parent().find('th').html() + ', Amplicon {point.x}:</span><br/>',
                pointFormat: '<b>{point.y}</b>'
            },
            chart: chart
        });

它仍然有点硬顶控制不同的图形颜色，但至少我设置的效果已设置。

根据条件为使用Highcharts.js

1 个答案: