Highcharts columnrange 自定义图例

debugcn 发表于 Dev

斯蒂芬·理查森

我正在创建一个 highcharts 列范围图表。我想要一个自定义图例，以便图例根据“legendGrouping”和该系列的相关颜色显示。从下面的 jsfiddle 示例中，我希望图例显示：

跑步（绿色）
失败（红色）
非故障（黄色）
排除（灰色）

到目前为止，这是jsfiddle。

Highcharts.chart('ChartColumnRangeMtbf', {
  chart: {
    type: 'columnrange',
    height: 300,
    inverted: true
  },
  title: {
    text: null
  },
  xAxis: {
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    gridLineWidth: 0,
    max: 1511182800000,
    min: 1510318800000,
    lineColor: 'transparent',
    startOnTick: false,
    endOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null,
    },
    type: 'datetime'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      },
      animation: true
    },
    series: {
      cursor: 'pointer',
      borderWidth: 0,
      point: {
        events: {
          click: function() {
            location.href = '../eventview?EventID=' + this.options.id;
          }
        }
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M', this.point.low) +
        ' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
    }
  },
  legend: {
    enabled: true
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Running',
    legendGrouping: 'Running',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 0,
    data: [{
      low: 1510318800000,
      high: 1511182800000,
      color: '#6cc14c'
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 294,
      "low": 1510750800000,
      "high": 1510751592000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Non-Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 256,
      "low": 1510664400000,
      "high": 1510677352000,
      "color": "#fde54a"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 238,
      "low": 1510663020000,
      "high": 1510664400000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 236,
      "low": 1510662963000,
      "high": 1510662967000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 213,
      "low": 1510661669000,
      "high": 1510662860000,
      "color": "#d9534f"
    }]
  }]
});

谢谢大家

深3015

使用series.bar.linkedTo为 Excluded（3 个事件）制作通用图例。

legend.labelFormatter格式化图例

Highcharts.chart('ChartColumnRangeMtbf', {
  chart: {
    type: 'columnrange',
    height: 300,
    inverted: true,
  },
  title: {
    text: null
  },
  xAxis: {
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    gridLineWidth: 0,
    max: 1511182800000,
    min: 1510318800000,
    lineColor: 'transparent',
    startOnTick: false,
    endOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null,
    },
    type: 'datetime'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      },
      animation: true
    },
    series: {
      cursor: 'pointer',
      borderWidth: 0,
      point: {
        events: {
          click: function() {
            location.href = '../eventview?EventID=' + this.options.id;
          }
        }
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M', this.point.low) +
        ' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
    }
  },
  legend: {
    symbolPadding: 0,
    symbolWidth: 0.1,
    symbolHeight: 0.1,
    symbolRadius: 0,
    useHTML: true,
    labelFormatter: function() {
    //console.log(this.userOptions.legendGrouping)
            return '<div>' +
            '<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.options.data[0].color + ';"> </div>' +
            "<span> " + this.userOptions.legendGrouping + " </span>" +
            '</div>'
        }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Running',
    legendGrouping: 'Running',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 0,
    data: [{
      low: 1510318800000,
      high: 1511182800000,
      color: '#6cc14c'
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    id:'ex',
    data: [{
      "id": 294,
      "low": 1510750800000,
      "high": 1510751592000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Non-Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 256,
      "low": 1510664400000,
      "high": 1510677352000,
      "color": "#fde54a"
    }]
  }, {
    name: 'Events',
    linkedTo:'ex',
    legendGrouping: 'Excluded',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 238,
      "low": 1510663020000,
      "high": 1510664400000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    linkedTo:'ex',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 236,
      "low": 1510662963000,
      "high": 1510662967000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Failure',
    colorByPoint: true,
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 213,
      "low": 1510661669000,
      "high": 1510662860000,
      "color": "#d9534f"
    }]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

或者

如果您可以更新系列数据并添加color为您在系列数据中添加的属性。并且还删除colorByPoint: true,

Highcharts.chart('ChartColumnRangeMtbf', {
  chart: {
    type: 'columnrange',
    height: 300,
    inverted: true,
  },
  title: {
    text: null
  },
  xAxis: {
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    tickLength: 0
  },
  yAxis: {
    gridLineWidth: 0,
    max: 1511182800000,
    min: 1510318800000,
    lineColor: 'transparent',
    startOnTick: false,
    endOnTick: false,
    labels: {
      enabled: false
    },
    title: {
      text: null,
    },
    type: 'datetime'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      },
      animation: true
    },
    series: {
      cursor: 'pointer',
      borderWidth: 0,
      point: {
        events: {
          click: function() {
            location.href = '../eventview?EventID=' + this.options.id;
          }
        }
      }
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%H:%M', this.point.low) +
        ' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
    }
  },
  legend: {

    useHTML: true,
    labelFormatter: function() {
            return  this.userOptions.legendGrouping 
        }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Running',
    legendGrouping: 'Running',
     color: '#6cc14c',
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 0,
    data: [{
      low: 1510318800000,
      high: 1511182800000,
      color: '#6cc14c'
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    "color": "#b5b2b2",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    id:'ex',
    data: [{
      "id": 294,
      "low": 1510750800000,
      "high": 1510751592000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Non-Failure',
    "color": "#fde54a",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 256,
      "low": 1510664400000,
      "high": 1510677352000,
      "color": "#fde54a"
    }]
  }, {
    name: 'Events',
    linkedTo:'ex',
    legendGrouping: 'Excluded',
     "color": "#b5b2b2",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 238,
      "low": 1510663020000,
      "high": 1510664400000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Excluded',
    linkedTo:'ex',
    "color": "#b5b2b2",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 236,
      "low": 1510662963000,
      "high": 1510662967000,
      "color": "#b5b2b2"
    }]
  }, {
    name: 'Events',
    legendGrouping: 'Failure',
    "color": "#d9534f",
    groupPadding: 0.5,
    pointWidth: 50,
    zIndex: 2,
    data: [{
      "id": 213,
      "low": 1510661669000,
      "high": 1510662860000,
      "color": "#d9534f"
    }]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。