jQWidgets jqxBulletChart 方向属性

jQWidgets jqxBulletChart 是一个用于显示数据范围和进展的JavaScript图表插件。其中一个重要的属性是方向属性，它用于设置表格的方向。

方向属性

jqxBulletChart 的方向属性有两个选项：

• horizontal （水平方向）
• vertical （垂直方向）

水平方向

当方向属性设置为 horizontal 时，表格水平展示。在水平展示中，数据范围从左到右，进展标记从左侧开始，向右侧延伸。

$('#jqxBulletChartHorizontal').jqxBulletChart({
    width: 500,
    height: 80,
    target: 680,
    ranges: [
        { startValue: 0, endValue: 200, color: '#00FF00' },
        { startValue: 200, endValue: 400, color: '#FFFF00' },
        { startValue: 400, endValue: 600, color: '#FFA500' },
        { startValue: 600, endValue: 750, color: '#FF0000' }
    ],
    orientation: 'horizontal',
    ticks: { position: 'both', interval: 50 },
    labelsFormat: 'c',
    showTooltip: true
});

垂直方向

当方向属性设置为 vertical 时，表格垂直展示。在垂直展示中，数据范围从下到上，进展标记从下方开始，向上方延伸。

$('#jqxBulletChartVertical').jqxBulletChart({
    width: 80,
    height: 500,
    target: 680,
    ranges: [
        { startValue: 0, endValue: 200, color: '#00FF00' },
        { startValue: 200, endValue: 400, color: '#FFFF00' },
        { startValue: 400, endValue: 600, color: '#FFA500' },
        { startValue: 600, endValue: 750, color: '#FF0000' }
    ],
    orientation: 'vertical',
    ticks: { position: 'both', interval: 50 },
    labelsFormat: 'c',
    showTooltip: true
});

总结

jQWidgets jqxBulletChart 方向属性允许您控制水平和垂直展示表格的方向。使用方向属性，您可以创建漂亮的数据范围和进展图表，以展示您的数据。