在select元素中显示highchart dashstyle(svg）

Display highchart dashstyle (svg) in select element

本文关键字：dashstyle svg highchart 显示 select 元素      更新时间：2023-09-26

我正在尝试用highchart dashstyles显示一个select元素。我需要在每个选项中显示dashstyle svg。

这是我的小提琴，只是为了更好地解释：http://jsfiddle.net/m2rqsx8e

原来的小提琴：http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/

如何使用jquery和/或bootrstap来完成此操作？我在这里发现了一个类似的问题，但使用了ExtJS。

代码：

<script src="http://code.highcharts.com/highcharts.js"></script>
<select id="container"> </select>
<script>
var renderer;
$(function () {
    var dashStyles = [
        'Solid',
        'ShortDash',`enter code here`
        'ShortDot',
        'ShortDashDot',
        'ShortDashDotDot',
        'Dot',
        'Dash',
        'LongDash',
        'DashDot',
        'LongDashDot',
        'LongDashDotDot'
    ];
    $.each(dashStyles, function (i, dashStyle) {
        $('#container').append('<option value="'+dashStyle+'"></option>');
        renderer = new Highcharts.Renderer(
        $('#container').find('option').last()[0],
        200,
        10
        );
        renderer.text(dashStyle, 10, 30 * i + 20)
            .add();
        renderer.path(['M', 10, 30 * i + 23, 'L', 390, 30 * i + 23])
            .attr({
                'stroke-width': 2,
                stroke: 'black',
                dashstyle: dashStyle
            })
            .add();
    });
});
</script>

我没有找到办法。所以我所做的是使用jQuery插件（ddslick）在下拉列表中渲染图像。我相信这不是最好的选择，但解决了我的问题，我会让它在这里作为一个替代方案。

代码是这样的：

<select for="dashstyle" id="dashStyles" name="dashStyle">
    <option value="Solid" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/Solid.png") %>" ></option>
    <option value="ShortDash" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDash.png") %>" ></option>
    <option value="ShortDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDot.png") %>" ></option>
    <option value="ShortDashDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDashDot.png") %>" ></option>
    <option value="ShortDashDotDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/ShortDashDotDot.png") %>" ></option>
    <option value="Dot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/Dot.png") %>" ></option>
    <option value="Dash" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/Dash.png") %>" ></option>
    <option value="LongDash" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/LongDash.png") %>" ></option>
    <option value="DashDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/DashDot.png") %>" ></option>
    <option value="LongDashDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/LongDashDot.png") %>" ></option>
    <option value="LongDashDotDot" data-imagesrc="<%= ResolveUrl("~/Content/img/lines/LongDashDotDot.png") %>" ></option>
</select>
相关文章：