图表中的交互式基准和系列选择

Interactive benchmarking and series selection in highcharts

本文关键字:系列 选择 基准 交互式      更新时间:2023-09-26

过去一周我一直在摆弄一个客户项目的highcharts。多么惊人的强大工具,如此伟大的资源!

手头的问题是,我对生产支出的简单年度分析根本不是他们想要的,现在我需要一个超级快速的周转,把想要的产品推出来。

我需要弄清楚的是如何让用户与图表(列)进行交互,这样他们就可以从几个生产者中进行选择,并选择一个作为90%,75%或50%的基准。这个基准将是这个系列的最后一个基准(最右边),因为其他基准(已经被选中,无论是只有1个还是其他4个)填充在里面。

这是我的全部内容:http://jsfiddle.net/UBYqY/

,这里是更相关的代码块:

plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 1,
            borderColor: ['#5e9a88', '#FF0000'],
            color: '#6ba896',
            shadow: false,
            series: {
                colorByPoint: true
            },
            events: {
                legendItemClick: ' ',
                checkboxClick: function (event) {
                    if (event.checked) {
                        this.show();
                    } else {
                        this.hide();
                    }
                }
            },
            showCheckbox: true
        },
    },
    series: [{
        name: "Faruqh",
        data: [360.85, 380.90],
        borderColor: "#dc7539"
    }, {
        name: "Debra",
        data: [551.59, 500.29],
        borderColor: "#dc7539"
    }, {
        name: "Dennis",
        data: [266.24, 282.28],
        borderColor: "#dc7539"
    }]

感谢您的帮助

您看过这个例子http://jsfiddle.net/UBYqY/7/吗?

 $("select").change(function(){
    chart.xAxis[0].setCategories(["Awesome"]);
    chart.addSeries({
        name: "75%",
        data: [400] 
    });
});