Question

需要折线图从第一列左边框开始到最后一列右边框，如下面的图片

在演示fiddel中，它是酒吧中心的开始。

这是我的系列代码，或者你可以在fiddel中看到：

<div class="container">
  <button type="button" class="btn btn-md btn-info collapsed" data-toggle="collapse" data-target="#title">Programme Title</button>
  <div id="title" class="collapse">
    <!-- START of TABLE  -->    


    <table>
        <thead>
            <th> Programme Title </th>
            <th class="midc"> Lead (s) </th>
            <th class="midc"> Theme </th>
            <th class="midc"> Cluster </th>
        </thead>
        <tbody>
            {% for p in progs %}
            <tr>
            <td><a href="programmes/{{ p.programme_ID }}"><mark>{{ p.Programme }}</mark></a> </td>
            {% endfor %}                    
            <td>
            {% for pc in pclus %}
            <label for="content"> Lead(s) </label>
            <select name="staffroles">
                    <option value=Null></option>
                    {% if pc.cluster_ID == pclus % }                        
                        <option value={{ p.cluster_ID }} selected> {{ p.Name }}</option>
                    {% else %}
                        <option value={{ pc.cluster_ID }}> {{ p.Name }}</option>
                    {% endif %}
            </td>
            <td class="midc"> {{ p.cluster_id }} </td>
            </tr>                                   
            {% endfor %}
            </select>
        </tbody>

    </table>


    </div>
    <!-- END OF TABLE -->
</div>

Answer 1

我分两步完成了预期的结果：

我在第一点之前和最后一点之后添加了一个点。然后，我设置min的{{1}}和max属性。这导致额外的点不可见，但是它们的行是。
创建剪辑路径并将其应用于线系列。 xAxis的维度基于第一列和最后一列的x位置：
```
clipRect
```

现场演示： http://jsfiddle.net/BlackLabel/x2r34huc/

API参考： https://api.highcharts.com/class-reference/Highcharts.SVGElement#clip

Answer 2

您需要在highcharts脚本代码后添加一些javascript。该脚本如下：

<script>

var rectangles = document.querySelectorAll(".highcharts-series-group > g > rect");
var last = parseInt(rectangles[rectangles.length-1].getAttribute("x")) + parseInt(rectangles[0].getAttribute("x"));
var increment = (last)/11; 
// 11 is the no of gaps in the bar graph
var x=0;

for(i=0;i<rectangles.length;i++)
{
    rectangles[i].setAttribute("x",x);
    x= x+increment;

}
</script>

这里是jsfiddle http://jsfiddle.net/jkwvus8u/15/

这可能是你想要的。但是在高图代码之后添加这段代码，因为它可以在高图表生成内容上工作

带有线的highcharts柱形图，需要在bar开始时的行开始

2 个答案: