着色Highcharts类别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了着色Highcharts类别相关的知识,希望对你有一定的参考价值。

我试图区分列范围图表上的多种类型的数据。问题是我希望能够按多个标准对它们进行分组。 我可以轻松地为不同的列着色,解决了一个问题,但我希望能够在xAxis上对类别进行着色(图表是倒置的),根据我传递给我的图表的数据,以获得某些东西像:enter image description here有没有办法获得这个?

编辑:

我以带有多个键的字典的形式传递我的数据:

entries[record['url']] = {
                'location': categories.index(str(counter) + '. ' + (record['term'] if record['term'] else record['uterm'])),
                'subjectid': record['subjectid'],
                'subject': record['subject'],
                'uterm': record['uterm'],
                'term': record['uterm'] if record['term'] else 'Uncoded term',
                'start_day': start_day,
                'end_day': end_day,
                'start': record['start'] if record['start'] else oldest_date,
                'end': record['full_end'] if record['full_end'] else '',    
                'full_end': record['full_end'] if record['full_end'] != record['full_start'] and record['full_end']!= '' else datetime.now().strftime(date_format),
                'full_start': record['full_start'],
                'persistence': record['persistence'] if record['persistence'] else '',
                'serious': record['serious'] if record['serious'] else '',
                'section': record['section'] if record['section'] else '',
                'min_date': record['min_date'],
                'color':'#FF4136' if record['serious'] and record['serious'].lower() == 'yes' else '#FF7329'  

我从数据库中以pandas数据帧的形式获取数据。我想使用section键根据seriouscolor的类别对各个条形码进行颜色编码

编辑2:

我遵循了卡米尔的建议,但现在我不确定如何动态添加数据,我尝试了以下内容:

             var data = [];
             var cols = [];
             for( elem in options_data){
                 data.push({
                     x: options_data[elem]['location'],
                     low: options_data[elem]['start_day'],
                     high: options_data[elem]['end_day'],
                     color: options_data[elem]['color']

                 });   
                 cols.push({
                     y: 0,
                     color: '#bada55'
                 });
             }
             data.join(", ");
             cols.join(", ");
             chart.addSeries([{
                 type: 'column',
                 yAxis: 1,
                 data: cols,
                 minPointLength: 10,
                 threshold: -0.1,
                 pointPadding: 0,
                 pointRange: 0,
                 groupPadding: 0,
                 showInLegend: false,
                 tooltip: {
                     pointFormat: false
                 },
                 states: {
                     hover: {
                         enabled: false
                     }
                 }                 
             },{
                 name: "Study Days",
                 data: data,
                 maxPointWidth: 30,
                 point: {
                     events: {
                         click: function() {
                             if (url != "")
                                 window.open(url,'_blank');                                 
                         }
                     }
                 }
             }]);  

这不会导致任何错误,但图表不会获取数据。这种方法仅适用于1个系列,但不适用于2个系列。

编辑3:

我已设法解决数据问题。我添加数据的最终版本是:

             chart.addSeries({
                 type: 'column',
                 yAxis: 1,
                 data: cols,                     
                 zIndex: 9999,
                 minPointLength: 10,
                 threshold: -0.1,
                 pointPadding: 0,
                 pointRange: 0,
                 groupPadding: 0,
                 showInLegend: false,
                 tooltip: {
                     pointFormat: false
                 },
                 states: {
                     hover: {
                         enabled: false
                     }
                 }                 
             });
                 chart.addSeries({
                 name: "Study Days",
                 data: data,
                 maxPointWidth: 30,
                 point: {
                     events: {
                         click: function() {
                             if (url != "")
                                 window.open(url,'_blank');                                 
                         }
                     }
                 }
             });
答案

您可以通过添加另一个机智配置的列系列和与之关联的y轴来实现这种外观:

  series: [{
    // series that mimics category markers
    type: 'column',
    yAxis: 1,
    data: [{
      y: 0,
      color: '#bada55'
    }, {
      y: 0,
      color: '#c0ffee'
    }],
    minPointLength: 10,
    threshold: -0.1,
    pointPadding: 0,
    pointRange: 0,
    groupPadding: 0,
    showInLegend: false,
    tooltip: {
      pointFormat: false
    },
    states: {
      hover: {
        enabled: false
      }
    }
  }, 
  // normal series...
],

yAxis: [{}, {
 // axis for category markers series
  tickPositions: [0, 1000],
  visible: false
}],

xAxis: {
  categories: ['apples', 'oranges'],
  offset: -10
},

现场演示:http://jsfiddle.net/BlackLabel/zfrq0tt2/

适当的Series.minPointLenghtSeries.thresholdAxis.tickPositions值以及列的零y值导致条形总是保持恒定的宽度。通过禁用showInLegendtooltip.pointFormatstates.hover.enabled属性可以防止与此系列的交互。

以上是关于着色Highcharts类别的主要内容,如果未能解决你的问题,请参考以下文章

Highcharts:如何将图例链接到类别而不是条形系列?

如何在片段着色器中平铺部分纹理

Shader2.0的顶点着色器和片段着色器

如何更改 highcharts 柱形图中每个类别的颜色?

带有顶点/片段着色器的光。使用不同的变量。 (openGL)

为啥保守光栅化无法为某些三角形调用片段着色器?