Javascript 根据使用Highcharts.js绘制的条形图的条件添加不同颜色的最佳方法

我有一个简单的Flask应用程序，它在HTML表中生成一系列带有Highcharts.js的闪亮条形图。我已经修改了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部分。传递给数据闪屏对象的所有值都是列表

      {% 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 %}

现在，根据烧瓶提供的值设置条形图颜色条件的最直接方法是什么？假设我想将默认条颜色设为蓝色，但如果“高于30”列表值中的一个值低于50，则条会变为红色

---

提前感谢

感谢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
        });

---

它仍然有点难控制不同的图形颜色，但至少设置了我想要的效果。

您可以使用zones属性？|这似乎是个好主意。我将尝试实施，非常感谢您的评论。