jqPlot图表插件使用说明（补遗）

时间 2019-11-20 标签 jqplot 图表插件使用说明补遗

图例的位置。在默认状况下，图例是位于图表内部的右上角的。这个位置大部分状况下都没有什么太大的问题，但有时候数据起伏变化较大时，有可能被图例遮挡。所以，有必要将图例放在图表的外部。要设置图例在图表外部，可使用legend的一个配置placement，它的取值能够是insideGrid和inside，outsideGrid和outside，inside和outside分别是insideGrid和outsideGrid的简写。html
```
legend:{
    show:true,
    placement:'outside' // 图例位于图表外部，placement默认值为insideGrid，等价于inside，还可取值outside，等价于outsideGrid
}
```

另外，在图例中显示的”Series 1“这个字符串，能够经过设置series属性的各个数组元素的label属性来定制。
数组

X轴标签。默认的X轴标刻度显示的是一系列数字，看不出任何实际意义。若是要改变这个显示，能够经过设置axes属性下的xaxis属性的ticks属性实现。它是一个数组，分别对应各个X节点的刻度名词。ide

axes:{
    xaxis:{
        renderer:$.jqplot.CategoryAxisRenderer,
        label:'选项',
        ticks:['选项A', '选项B', '选项C', '选项D', '选项E']  // 一维数组
    },
    yaxis: {
        label: '投票数'
    }
}

{
    axes:{
        xaxis:{
            label:'日期',
            ticks:[[1,'05/01'], [2,'05/05'], [3,'05/10'], [4,'05/15'], [5,'05/20'], [6,'05/25']] // 二维数组
        },
        yaxis: {
            label: '投放数量'
        }
    }
}

没有数据时的提示。不少时候，当咱们请求数据时，可能并不能如愿获得数据。若是没有数据时该怎么表现才比较合适呢？jqPlot中，若是不作任何配置，数据为null或者空数组时，都会抛出No Data的异常，而后图表显示一片空白，这样很不友好。可是若是咱们稍做设置，就能很好的处理没有数据的图表展现效果。spa
```
$.jqplot('chart1', null, { // 数据也能够是[[]]
    noDataIndicator:{
        show:true,
        indicator:'<font color=red>暂无数据</font>' // 可以使用html标签
    }
});
```
显示数据点的值。若是图表只是一条线，看不到具体的数值，那么图表自己直观展现数据的长处就发挥不出来。因此，图表默认应该展现出各个数据点的值。但jqPlot默认没有这么作，若是要展现数据点取值，须要作一些配置。用到的属性是pointLabels，这个配置须要引入jqplot.pointLabels.min.js文件。code
```
seriesDefaults:{
    pointLabels: {  // 显示数据点，依赖于jqplot.pointLabels.min.js文件
        show: true
    }
}
```