CanvasJS，在 x 轴标签和数据点标签上显示不同的值-解网

问：

我正在使用 CanvasJS 样条图。在处理 x 轴数据时，我希望在图表下方的 x 轴标签显示预设数字，而数据点鼠标悬停功能应显示日期。在下图中，当我将鼠标悬停在数据点上时，我希望它显示 x 轴标签的日期。所以它应该看起来像（2022-09-20：344）而不是（4：344）。

索引标签显示每个数据点上方的数据，我不想这样。鼠标悬停函数 canvajs 可能会解决问题，但他们的示例使用 alert（）。

dataPoints: [
   { x: 10,   y: 71,   mouseover: function(e){
          alert(  e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );   },
   },
 ]

如果可能的话，我想让他们的原始鼠标悬停功能只是使用不同的数据。

目前，我的数据点是从循环中设置的，如下所示：

data = [
  {
    type: "spline",
    name: Object.keys(tix_data)[0],
    color: color_arr[i] // (array of colors),
    showInLegend: true,
    axisYIndex: axisYIndex // (this is a variable set elsewhere),
    dataPoints: {"y" => someDollarAmount, "label" => i, "name" => someDate}, // etc...
  }
]

“name”是我希望我的日期值去的地方，它只是没有按照我想要的方式工作。

我的图表功能目前是这样设置的：

const chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Market price from days to event"
            },
            axisY: [{
                title: "Market Price",
                lineColor: "#C24642",
                tickColor: "#C24642",
                labelFontColor: "#C24642",
                titleFontColor: "#C24642",
                prefix: "$"
            }],
            axisX: [{
                title: "Days to event",
                reversed:  true
            }],
            data: data
        });

我能够想出一些解决方案，详细信息在下面的评论中，但这是结果的图像：

JavaScript 画布JS

在我找到更好的解决方案之前，我能够通过在图形中添加一条线来实现我想要的，该线具有标签 0 - 30，覆盖其他 x 轴标签，并将其他标签设置回它们的日期。我尝试将该行设置为visible：false，但这会导致这些x轴标签再次被删除。因此，我把这条线变成了白色，这样它几乎看不见。我会在我的问题中添加一张图片以供参考。

答：

0赞 Vishwas R 1/20/2023 #1

您可以通过在轴标签中设置 tooltipContent 和常规数字，在工具提示中显示自定义内容。下面是一个示例。

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Market price from days to event"
  },
  axisY: [{
    title: "Market Price",
    lineColor: "#C24642",
    tickColor: "#C24642",
    labelFontColor: "#C24642",
    titleFontColor: "#C24642",
    prefix: "$"
  }],
  axisX: [{
    title: "Days to event",
    reversed:  true
  }],
  data: [{
    type: "spline",
    toolTipContent: "<span style='\"'color: {color};'\";'>{toolTipX}</span>: {y}",
    dataPoints: [
      { toolTipX: "Jan 1, 2023", x: 1, y: 650 },
      { toolTipX: "Jan 2, 2023", x: 2, y: 700 },
      { toolTipX: "Jan 3, 2023", x: 3, y: 710 },
      { toolTipX: "Jan 4, 2023", x: 4, y: 658 },
      { toolTipX: "Jan 5, 2023", x: 5, y: 734 },
      { toolTipX: "Jan 6, 2023", x: 6, y: 963 },
      { toolTipX: "Jan 7, 2023", x: 7, y: 847 },
      { toolTipX: "Jan 8, 2023", x: 8, y: 853 },
      { toolTipX: "Jan 9, 2023", x: 9, y: 869 },
      { toolTipX: "Jan 10, 2023", x: 10, y: 943 },
      { toolTipX: "Jan 11, 2023", x: 11, y: 970 },
      { toolTipX: "Jan 12, 2023", x: 12, y: 869 },
      { toolTipX: "Jan 13, 2023", x: 13, y: 890 },
      { toolTipX: "Jan 14, 2023", x: 14, y: 930 }
    ]
  }]
});
chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 320px; width: 100%;"></div>

CanvasJS，在 x 轴标签和数据点标签上显示不同的值

CanvasJS, show different values on x-axis label and datapoint label

评论

评论