javascript - 如何设置图例(jqplot)中各个标签的颜色?

标签 javascript jquery jqplot

我正在使用 jqplot 在页面上绘制图表。我正在绘制多条线,我需要显示一个有助于识别线的图例。

线条有不同的颜色,所以我需要找到一种方法来设置图例中显示的各个标签的颜色。

  var plot3 = jQuery.jqplot('div1', [data1, data2, data3, data4],
    {
      // Series options are specified as an array of objects, one object
      // for each series.
      series:[
          {
            color: '#FF0000',
            // Change our line width and use a diamond shaped marker.
            lineWidth:2,
            markerOptions: { style:'diamond' }
          },
          {
            color: '#00FF00',
            // Don't show a line, just show markers.
            // Make the markers 7 pixels with an 'x' style
            showLine:false,
            markerOptions: { size: 7, style:"x" }
          },
          {
            color: '#0000FF',
            // Use (open) circular markers.
            markerOptions: { style:"circle" }
          },
          {
            color: '#F0000F',
            // Use a thicker, 5 pixel line and 10 pixel
            // filled square markers.
            lineWidth:5,
            markerOptions: { style:"filledSquare", size:10 }
          }
      ],

legend:{
           renderer: jQuery.jqplot.EnhancedLegendRenderer,
           show: true,
           labels: ['data1', 'data2', 'data3', 'data4']
        }
    }

[编辑]

我已经删除了以前的代码 - 因为它是一个红色的鲱鱼。我还更改了标题,以反射(reflect)我尝试解决问题的新方法,经过几天的努力。

最佳答案

在图例后,请这样添加:

legend: {show: true } , 
series:[{label:'BANANA'}, {label:'ORANGE'}  ],  

这将为您提供图例名称。

关于javascript - 如何设置图例(jqplot)中各个标签的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6350254/

相关文章:

javascript - Chart.js 2.0 中的添加数据

javascript - d3 折线图和面积图未使用新数据数组更新

javascript - 在发布请求后更新页面的一部分

javascript - 如何在 Vue3 的 js 文件中访问 Vue 实例?

javascript - 子菜单在屏幕调整大小时无法正确呈现(以及意外行为)

html - jqplot图形文字颜色

javascript - 切换时多个 slider 崩溃

javascript - 为每个类别添加一个循环编号

jquery - jqplot条形图和折线图,其中折线图在后面

javascript - 当条形尺寸小于标签文本时如何删除条形标签?