Question

我想使用带有extjs的highcharts生成报告。我试过了样本http://jsfiddle.net/6qsvjark/2/。

series: [{
        name: 'Data',
        data: [{
            x: 0,
            low: 7,
            high: 8
        },{
            x: 0,
            low: 8.1,
            high: 9,
            color: "#202020"
        },{
            x: 1,
            low: 6.5,
            high: 7.5
        },{ 
            x: 1,
            low: 7.5,
            high: 8.5,
            color: "#202020"
        }]
    }]

是否可以在列范围类型的高级图表中自定义条形的大小/形状（例如，圆角）？此外，是否可以在2个数据串联中放置符号？请参考图片

一系列中两个数据（具有相同的'x'点）之间的符号

Answer 1

您可以对highcharts进行相当多的自定义。然而，实现这些效果通常意味着在某种程度上推动了不同定制选项的用途，并添加了一些硬编码项目，从而使您的图表在不同尺寸下的可移植性降低。它可能会花费一些额外的时间和精力来使它运作良好。

作为起点，您可以使用以下示例：

http://jsfiddle.net/c96qy0qa/

这里我使用borderRadius来圆角，第3（中）系列的自定义标签在其他两个系列之间显示一个图标。另外，我使用中间显示的系列与其他两个重叠，以隐藏中间的粗糙角落。

            series: [{
            name: 'Male',
            borderRadius:20,
            data: [-2.2, -2.2]
        },{
            name: 'Female',
            borderRadius:20,
            data: [2.1, 3.0 ]
        }, {
            name: 'blah',
            borderWidth:30,
            borderRadius:10,
            borderColor:"#ffffff",
            dataLabels:{
               enabled:true,
               useHTML:true,
               crop:false,
               formatter:function(){ return "<img  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwJCBoDRV/pcAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABkklEQVRo3u1aQRKDMAgsTI4+xP+/xod4p6fOdNqoARZInXpsY8jCAhsTEpHHHR5+3OS5DZB29ifttKENyiJrBBA6ypEIEJHAyqlFO20Ip7VZON4Do4kWZ3PZC06dI55Je07w0ufKsUNAvCCQxeRo/ksgIwY9NLQA6tlrlSB671sjZe4jEcXAQ2GubIYem5/j+RdB9JopZxuPyEPaafvKEe0CrbliAXD2DlfQCN1DhoGgKhSisR79zt6JRxaniYIsslocx9GejpA3vXGM4qiX+176ckQya9RByA4Rpa1GooOWOGylwmwfIDh7MVE7T/YY1i4qsh+5k12zOIQ+O5oDUrWywEyltaw952p8eGdHABoZ0zIXfjafR8vJImuLBiGLrBbg2obKkbx+GRuRIlppo6YW6ruTJzrQ/QiqFGsio6Li+54d6f3MSH9FJFNyoG2li8YoW2UnVpo9vEn9ao4FPB0d7ZiG9iyyKqnEaPWpLqwKok+sqooHae+izHqJgCuMhmx/UbeDMlVBKJDq53/NabbnCakwWb7DRriDAAAAAElFTkSuQmCC'>"; },
               x:0
            },
            data: [0.3, 0.3]
        }]

Highcharts - 是否可以自定义列范围类型的条形图？

1 个答案: