javascript - jqplot:条形图的图例数据格式

标签 javascript jquery jqplot

我无法为给定的 jqplot 创建包含我需要的所有项目的图例。

我第一次使用 jqplot,很难以正确的格式创建条形图数据数组。我找到了解决方案,但我没有我需要的图例标签。

var chartData = [
    [
        ['Portfolio Risk', 1],
        ['Model Risk', 4],
        ['Recovery Risk', 1],
        ['Capability Risk', 1],
        ['Process Risk', 1],
        ['Forward flow risk', 5]
    ]
];

//var ticks = ['Portfolio Risk'], ['Model Risk'], ['Recovery Risk'], ['Process Risk'], ['Forward flow risk'];

plot2 = $.jqplot('chart1', chartData, {
    seriesColors: ['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {
            // Set the varyBarColor option to true to use different colors for each bar.
            // The default series colors are used.
            varyBarColor: true
        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions: {
                angle: 90
            },
            //ticks: ticks

        },
        yaxis: {
            //renderer: $.jqplot.CategoryAxisRenderer                    
            tickOptions: {
                stringFormat: "%d"
            }
        },
    },
    legend: {
        show: true,
        placement: 'outside',
        //labels: ticks
    },
});

JSFiddle 在这里:http://jsfiddle.net/renatevidruska/7dn86/ 您可以在图例中看到缺少的标签(应该有更多的项目)。 我尝试使用不同的格式创建 ticks 数组,但没有成功。

最佳答案

您的报价没有旋转,因为您没有包含 <script> 中的一些内容.请看an example of tick .

并且您的图例缺少一些标签,因为您的 chartData (数组)不正确。 Here is an example of legend .

这是工作代码。 http://jsfiddle.net/7dn86/3/

关于javascript - jqplot:条形图的图例数据格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20628776/

相关文章:

javascript - jQuery 从具有相同类的不同 div 的元素中获取文本值

javascript - 任何 Jqplot 图表的背景不透明度

javascript - 在派生类而不是类本身上添加新方法有什么好处?

javascript - 判断一个数是否可​​以被 3 或 5 整除 (FizzBu​​zz)

javascript - 错误 : TypeError: Object has no method 'set'

jquery - 如何在jQuery中获取以逗号分隔的子元素值

jquery - 最后加载一些 CSS 可以加快页面加载时间吗?

javascript - JqPlot - LINE 和 FILL 的不同颜色如何?

javascript - 为 Google 图表(线)中的每个列值定义标签

javascript - 如何根据 REACT 中的文本输入从 API 进行搜索