jquery - 根据分数设置 jQuery float 条颜色

Question

我是 jQuery flot 插件的新手，我想根据分数设置每个条的颜色。

“我自己”栏的得分:

• 0 - 20:红色
• 20 - 70:黄色
• 70 - 100:绿色

“你”栏的得分:

• 0 - 20:蓝色
• 20 - 70:黑色
• 70 - 100:橙色

代码片段:

$.plot(
  $("#placeholder"),[{
    data: [[1, 81], [3.5, 33]],
    label: 'Myself',
    bars: {
      show: true,
      barWidth: 1,
      lineWidth: 0,
      fill: true,
      fillColor: {
        colors: [{brightness: 1}, {brightness: 0.5}],
        horizontal: true
      },
      align: "center"
    }
  },{
    data: [[2, 18], [4.5, 75]],
    label: 'You',
    color: 'red',
    bars: {
      show: true,
      barWidth: 1,
      lineWidth: 0,
      fill: true,
      fillColor: {
        colors: [{brightness: 1}, {brightness: 0.5}],
        horizontal: true
      },
      align: "center"
    }
  }],{
    xaxis: {
      ticks: [[1.5, '1st half'], [4, '2nd half']],
      min: 0,
      max: 5.5,
      tickLength: 0
    },
    yaxis: {tickLength: 0},
    grid: {
      backgroundColor: "#ffffff",
      borderWidth: 0,
      markings: [{xaxis: {from: 0, to: 0}, color: "#909090"}, {yaxis: {from: 0, to: 0}, color: "#909090"}]
  },
  legend: {backgroundOpacity: 0.6, position: 'ne', margin: [-10, 0]},
  valueLabels: {show: true, truncateValue: 2}
});

上述代码的JSFiddle是here 。我非常感谢您的帮助。

Answer 1

您可以实现一个自定义绘制钩子(Hook)，例如 this 。然而，当我需要这样做时，当范围不多时，我会采取不同的方法。

如果您可以控制源数据格式，则可以为每个值范围创建单独的系列，并以这种方式分配适当的颜色。因此，您将拥有以下系列:Myself0-20、Myself20-70、Myself70-100、You0-20、You20-70、You70-100。

JSFiddle 代码的唯一修改是添加了新系列 ( fiddle ):

$.plot($("#placeholder"), [
  {data: [[1, 0], [3.5, 0]], label: 'Myself0-20', color: 'red', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[1, 0], [3.5, 33]], label: 'Myself20-70', color: 'yellow', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[1, 81], [3.5, 0]], label: 'Myself70-100', color: 'green', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[2, 18], [4.5, 0]], label: 'You0-20', color: 'blue', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[2, 0], [4.5, 0]], label: 'You20-70', color: 'black', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}},
  {data: [[2, 0], [4.5, 75]], label: 'You70-100', color: 'orange', bars: {show: true, barWidth: 1, lineWidth: 0, fill: true, fillColor: {colors: [{brightness: 1}, {brightness: 0.5}], horizontal: true}, align: "center"}}
],{
  xaxis: {ticks: [[1.5, '1st half'], [4, '2nd half']], min: 0, max: 5.5, tickLength: 0},
  yaxis: {tickLength: 0},
  grid: {backgroundColor: "#ffffff", borderWidth: 0, markings: [{xaxis: {from: 0, to: 0}, color: "#909090"}, {yaxis: {from: 0, to: 0}, color: "#909090"}]},
  legend: {backgroundOpacity: 0.6, position: 'ne', margin: [-10, 0]},
  valueLabels: {show: true, truncateValue: 2}
});