Highcharts和图案填充

时间:2014-07-14 19:21:27

标签: image highcharts

我试图建立这样的东西:http://www.u-wert.net/berechnung/u-wert-rechner/?&d0=20&mid0=10&d1=10&mid1=15&d2=5&mid2=70&bt=0&T_i=20&RH_i=50&T_e=-10&RH_e=80&outside=0

根据几种输入形式,高图表应显示墙的结构。因此,我使用PlotBands和Highcharts pattern-fill-plugin。这是当前的代码:

<script language="JavaScript">
    $(document).ready(function() {

        chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'chart_panel',
                    type: 'spline',
                    title: { text: 'Text' }
                    }
            });

        var url = '{% url "create_output" %}';
        $('#myForm').change(function() { 
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), 
                type: $(this).attr('method'), 
                url: url, 
                success: function(data) { 

                    if (chart) chart.destroy();

                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'chart_panel',
                            type: 'line'
                            },
                        title: {text: 'Titletext'},
                        xAxis: {title: {text: "x-Axis text"}},
                        yAxis: {title: {text: "yAxis text"}},
                    });


                    // Adds a series  
                    chart.addSeries({                        
                        name: "Series name",
                        data: data["seriesdata"]
                        });



                    // Plots the wall layer

                    $.each(data["thickness_from"], function(index, value ) {

                        chart.xAxis[0].addPlotBand({
                            from: value,
                            to: data["thickness_to"][index],
                            color: {pattern: data["image"][index], 
                                    width: data["width"][index],
                                    height: data["height"][index]
                                    },
                        });
                    });

                }
            });
            return false;
        });
    });
</script> 

大多数事情都运作良好,Highcharts做了很好的策划&#34;正常模式&#34;。但是,当不止一次地绘制除正常模式之外的情况时会出现问题。例如,当绘制绝缘墙层(类似于波浪)时,应该精确地适合给定的宽度。然后,Highcharts将图案显示为一个连接的图案,并且图案不匹配到墙壁图层的所需宽度。

这是我的问题: 是否可以为每个墙层图案设置固定的起点,以便单独显示每个PlotBand?或者是另一个解决方案(使用renderer.image?)更适合这个问题?

感谢您的回复! :)

0 个答案:

没有答案