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

Question

我正在尝试显示带有高图表破折号样式的 select 元素。我需要在每个选项中显示 dashstyle svg。

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

原文fiddle：http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/

如何使用 jquery and/or 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>

Answer 1

没找到方法。所以我所做的是使用 jQuery plugin (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>

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

Display highchart dashstyle (svg) in select element

javascript

jquery

html

highcharts