【问题标题】:Change line color in Anychart radar chart更改 Anychart 雷达图中的线条颜色
【发布时间】:2018-06-11 09:21:32
【问题描述】:

是否可以为以下雷达图中的线条添加颜色?

anychart.onDocumentReady(function() {

  // chart type
  var chart = anychart.radar();

  // chart title
  chart.title().text('Spending');

  // series type and data set
  chart.line([
    {x: "Administration", value:"22"},
    {x: "Sales", value:"34"},
    {x: "Marketing", value:"16"},
    {x: "Research", value:"12"},
    {x: "Support", value:"38"},
    {x: "Development", value:"47"}
  ]);

  // draw chart
  chart.container('container').draw();
});

我已尝试添加fill,但似乎不起作用

chart.line([
  {x: "Administration", value:"22", fill: "#color-code"},
  {x: "Sales", value:"34", fill: "#color-code"},
  {x: "Marketing", value:"16", fill: "#color-code"},
  {x: "Research", value:"12", fill: "#color-code"},
  {x: "Support", value:"38", fill: "#color-code"},
  {x: "Development", value:"47", fill: "#color-code"}
]);

【问题讨论】:

    标签: javascript radar-chart anychart


    【解决方案1】:

    这是Radar Plot: Line 所说的雷达图上的线系列。 所以它遵循Line Chart系列设置:并且你需要设置Stroke,而不是填充,例如:

      line = chart.line([
        {x: "Administration", value:"22"},
        {x: "Sales", value:"34"},
        {x: "Marketing", value:"16"},
        {x: "Research", value:"12"},
        {x: "Support", value:"38"},
        {x: "Development", value:"47"}
      ]);
    
      line.stroke('red 3', 2, 2);
    

    正如Radar Line Chart with Stroke Settings Sample 所示:

      chart.palette(["Black", "Green"]);
    

    或者,如果您需要几行不同的行,您可以使用AnyChart PaletteAnyChart Palette Multiple Lines Radar Chart

    这里也是基本示例的 sn-p:

    anychart.onDocumentReady(function() {
    
      // chart type
      var chart = anychart.radar();
    
      // chart title
      chart.title().text('Spending');
      
      // set palette
      chart.palette(["Black", "Green"]);
    
      // series type and data set
      chart.line([
        {x: "Administration", value:"22"},
        {x: "Sales", value:"34"},
        {x: "Marketing", value:"16"},
        {x: "Research", value:"12"},
        {x: "Support", value:"38"},
        {x: "Development", value:"47"}
      ]);
      
      // series type and data set
      chart.line([
        {x: "Administration", value:"32"},
        {x: "Sales", value:"44"},
        {x: "Marketing", value:"46"},
        {x: "Research", value:"42"},
        {x: "Support", value:"48"},
        {x: "Development", value:"57"}
      ]);
      
    
      // draw chart
      chart.container('container').draw();
    });
    html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-bundle.min.js"></script>
    <div id="container"></div>

    【讨论】: