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

发布于 2024-11-15 05:26:10 字数 1415 浏览 4 评论 0原文

我正在使用 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']
        }
    }

[编辑]

我已经删除了之前的代码 - 因为它是一个转移注意力的内容。我还更改了标题,以反映我在努力解决问题几天后尝试解决问题的新方法。

I am using jqplot to plot a chart on a page. I am plotting multiple lines and I need to display a legend which will help identify the lines.

The lines have different colors, so I need to find a way of setting the coklor of individual labels displayed in the legend.

  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']
        }
    }

[Edit]

I have removed the previous code - as it was a red herring. I have also changed the title to reflect the new way I am trying to solve the problem, after struggling with it for days.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

偏闹i 2024-11-22 05:26:10

在图例之后,请像这样添加:

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

这将为您提供图例名称。

After legend, please add it like this:

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

This will give you legend name.

夜唯美灬不弃 2024-11-22 05:26:10

您可以使用 seriesColors 设置系列和图例的颜色,如下所示:

var plot1 = $.jqplot('chart', [data1, data2], {
legend: {
    show: true
},
seriesColors: ['red', 'blue']
});

You can set the color on the series and on the legend by using seriesColors as follows:

var plot1 = $.jqplot('chart', [data1, data2], {
legend: {
    show: true
},
seriesColors: ['red', 'blue']
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文