Question

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

对于＆＃34;我自己＆＃34;的分数条：

0 - 20：红色
20 - 70：黄色
70 - 100：绿色

对于＆＃34;你＆＃34;的分数条：

0 - 20：blue
20 - 70：黑色
70 - 100：orange

代码段：

$.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

你可以实现像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}
});

根据分数设置jQuery flot bar颜色

1 个答案: