Highcharts盒状图定制 [英] Highcharts box plot chart customization

问题描述

是否可以定制Highcharts盒状图有标记，而不是方框。我需要创造的东西，这是一个脾脏和箱线图之间的交叉。我试图用错误的例子吧捣乱，但不能拿到样条线不失标记被隐藏：的http：// jsfiddle.net/ryfqwska/ 我试图创建这个：

  $（函数（）{
    $（'＃集装箱'）。highcharts（{
        图：{
            zoomType：'XY'
        }，
        标题：{
            文字：温度VS降雨
        }，
        plotOptions：{
            系列：{
                的lineWidth：1
            }
        }，
        XAXIS：[{
            类别：['扬'，'月'，'月'，'月'，'五一'，'君'，'月'，'月'，'月'，'月'，'月'，'月' ]
        }]，
        Y轴：[{//主Y轴
            标签： {
                格式：{}值°C'，
                风格：{
                    颜色：Highcharts.getOptions（色）[1]。
                }
            }，
            标题：{
                文字：'温度'，
                风格：{
                    颜色：Highcharts.getOptions（色）[1]。
                }
            }
        }，{//次要Y轴
            标题：{
                文字：降雨，
                风格：{
                    颜色：Highcharts.getOptions（色）[0]。
                }
            }，
            标签： {
                格式：{}值毫米'，
                风格：{
                    颜色：Highcharts.getOptions（色）[0]。
                }
            }，
            相反：真
        }]，        提示：{
            共享：真
        }，        系列：[{
            名称：'降雨错误'，
            类型：'errorbar'，
            Y轴：1，
            数据：[[48，51]，[68，73]，[92，110]，[128，136]，[140，150]，[171，179]，[135，143]，[142，149] [204，220]，[189，199]，[95，110]，[52,56]，
            提示：{
                pointFormat：'（误差范围：{point.low}  -  {} point.high毫米）LT; BR /＆GT;'
            }
        }，{
            名称：'温度'，
            类型：'样条'，
            数据：[7.0，6.9，9.5，14.5，18.2，21.5，25.2，26.5，23.3，18.3，13.9，9.6]
            提示：{
                pointFormat：'＆LT;跨度风格=字体重量：大胆;颜色：{series.color}＆GT; {series.name}＆LT; / SPAN计算值：＆LT; B＆GT; {point.y：.1F}°C＆LT ; / b＆GT; 
            }
        }，{
            名称：'温度误差'，
            类型：'errorbar'，
            数据：[[6,8]，[5.9，7.6]，[9.4，10.4]，[14.1 15.9]，[18.0 20.1]，[21.0 24.0]，[23.2 25.3]，[26.1，27.8] [23.2，23.9]，[18.0，21.1]，[12.9，14.0]，[7.6，10.0]
            提示：{
                pointFormat：'（误差范围：{point.low}  -  {point.high}°℃）下峰; br /＆GT;'
            }
        }]
    }）;
}）;
 

解决方案

在你的花键系列，颜色设置为白色，然后设置标志填充色为别的东西。这将隐藏线，只显示标记，也正确更新的传说。

 名称：'温度'，
类型：'样条'，
数据：[7.0，6.9，9.5，14.5，18.2，21.5，25.2，26.5，23.3，18.3，13.9，9.6]
颜色：'白'，/ *隐藏行* /
标记：{填充颜色：红色} / *揭示了唯一的标记* /
提示：{
    pointFormat：'＆LT;跨度风格=字体重量：大胆;颜色：{series.color}＆GT; {series.name}＆LT; / SPAN计算值：＆LT; B＆GT; {point.y：.1F}°C＆LT ; / b＆GT; 
}
 

又见小提琴在： http://jsfiddle.net/brightmatrix/ryfqwska/1/

我希望这有助于！

Is it possible to customize the Highcharts box plot chart to have markers instead of boxes. I need to create something that's a cross between a spleen and a box plot. I tried messing with the error bar example but can't get the spline line to be hidden without losing the markers:

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Temperature vs Rainfall'
        },
        plotOptions: {
            series: {
                lineWidth: 1
            }
        },
        xAxis: [{
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value} °C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],

        tooltip: {
            shared: true
        },

        series: [{
            name: 'Rainfall error',
            type: 'errorbar',
            yAxis: 1,
            data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]],
            tooltip: {
                pointFormat: '(error range: {point.low}-{point.high} mm)<br/>'
            }
        }, {
            name: 'Temperature',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
            }
        }, {
            name: 'Temperature error',
            type: 'errorbar',
            data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],
            tooltip: {
                pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
            }
        }]
    });
});

解决方案

In your spline series, set the color to 'white' and then set the marker fill color to something else. This will hide the line, show the markers only, and also update the legend correctly.

name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
color: 'white', /* hides the line */
marker: { fillColor: 'red'}, /* reveals the markers only */
tooltip: {
    pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
}

See also the fiddle at: http://jsfiddle.net/brightmatrix/ryfqwska/1/

I hope this helps!

这篇关于Highcharts盒状图定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！