CanvasJS图表缺失坐标轴数字及第二个数据集图例问题

Hey there! I’ve looked into your CanvasJS chart code and spotted the exact issues causing the axis labels to disappear and the second dataset’s legend to go missing. Here’s how to fix them step by step:

1. Fixing Missing Axis Numbers (Labels) #

The axis labels aren’t showing up because you haven’t defined a clear format for the axis values, and without explicit styling, they might blend into the background or fail to render properly. Here’s what to adjust:

• For the X-axis (date values), add a valueFormatString to specify how dates should be displayed, and explicitly enable labels (they’re on by default, but setting this ensures clarity):

  axisX: {
    labelsEnabled: true,
    valueFormatString: "MMM DD, YYYY",
    labelFontColor: "#333" // Ensures contrast with light backgrounds
  }
  

• For the Y-axis (yield values), set a numeric format to make percentage values readable, and confirm label visibility:

  axisY: {
    labelsEnabled: true,
    valueFormatString: "#,##0.00%",
    labelFontColor: "#333"
  }
  

2. Fixing Missing Second Dataset Legend #

CanvasJS only adds entries to the legend for data series that have a name property defined. Your second dataset was missing this key attribute. Simply add a name to the second dataSeries object:

{
  type: "line",
  name: "10-Year Treasury Yield", // This line enables the legend entry
  dataPoints: tenYearDataPoints
}

Full Modified Code Snippet #

Here’s the adjusted chart initialization code incorporating both fixes:

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Treasury Yield Curve"
  },
  axisX: {
    labelsEnabled: true,
    valueFormatString: "MMM DD, YYYY",
    labelFontColor: "#333"
  },
  axisY: {
    labelsEnabled: true,
    valueFormatString: "#,##0.00%",
    labelFontColor: "#333"
  },
  legend: {
    cursor: "pointer",
    itemclick: function(e) {
      if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
      } else {
        e.dataSeries.visible = true;
      }
      chart.render();
    }
  },
  data: [{
    type: "line",
    name: "2-Year Treasury Yield",
    dataPoints: twoYearDataPoints
  }, {
    type: "line",
    name: "10-Year Treasury Yield",
    dataPoints: tenYearDataPoints
  }]
});
chart.render();

After making these changes, both the axis labels will display clearly, and the second dataset will show up in the legend with its assigned name.

内容的提问来源于stack exchange，提问作者Xeverus