javascript - 无法让 CanvasJS 仅对工具提示中的坐标进行着色

Question

工具提示文本:

10 Dataseries 1: 71 Dataseries 2: 77

我正在尝试获取工具提示，因此 Dataseries 1:和 Dataseries 2:保持当前颜色，10 , 71 , 和 77是红色的。我试过toolTipContent: " x: <span style='\"'color: red;'\"'>{x}</span> y: {y} <br/> name: {name}, label:{label} ",但它没有改变任何东西。我确信这对我来说是一个愚蠢的错误，但我是使用 CanvasJS 的新手并且无法使任何东西工作。 ( https://jsfiddle.net/lightmaster/8p3ygwf1/ )

var chart = new CanvasJS.Chart("chartContainer", {
  backgroundColor: "RGBA(37, 41, 45, 0.9)",
  animationEnabled: true,

  title: {
    text: " ",
    fontSize: 11,
    fontColor: ' #ccc',
    fontFamily: "arial",
  },

  toolTip: {
    fontStyle: "normal",
    cornerRadius: 4,
    backgroundColor: "RGBA(37, 41, 45, 0.9)",
    toolTipContent: " x: {x} y: {y} <br/> name: {name}, label:{label} ",
    shared: true,
  },

  axisX: {
    gridColor: "RGBA(64, 65, 66, 0.8)",
    labelFontSize: 10,
    labelFontColor: ' #ccc',
    lineThickness: 1,
    gridThickness: 1,
    gridDashType: "dot",
    titleFontFamily: "arial",
    labelFontFamily: "arial",
    interval: "auto",
    intervalType: "hour",
    minimum: 0,
    crosshair: {
      enabled: true,
      snapToDataPoint: true,
      color: "#9aba2f",
      labelFontColor: "#ccc",
      labelFontSize: 14,
      labelBackgroundColor: "#FF8841",
    }
  },

  axisY: {
    title: "Temperature (°F) Recorded",
    titleFontColor: "#ccc",
    titleFontSize: 10,
    titleWrap: false,
    margin: 10,
    lineThickness: 1,
    gridThickness: 1,
    gridDashType: "dot",
    includeZero: false,
    gridColor: "RGBA(64, 65, 66, 0.8)",
    labelFontSize: 11,
    labelFontColor: ' #ccc',
    titleFontFamily: "arial",
    labelFontFamily: "arial",
    labelFormatter: function(e) {
      return e.value.toFixed(0) + " °F ";
    },
    crosshair: {
      enabled: true,
      snapToDataPoint: true,
      color: "#9aba2f",
      labelFontColor: "#fff",
      labelFontSize: 12,
      labelBackgroundColor: "#FF8841",
      valueFormatString: "#0.# °F",
    }
  },

  legend: {
    fontFamily: "arial",
    fontColor: "#ccc",

  },
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    },
    {
      type: "spline",
      dataPoints: [
        { x: 10, y: 77 },
        { x: 20, y: 53 },
        { x: 30, y: 58 },
        { x: 40, y: 61 },
        { x: 50, y: 99 },
        { x: 60, y: 60 },
        { x: 70, y: 20 },
        { x: 80, y: 31 },
        { x: 90, y: 26 }
      ]
    }
  ]
});

chart.render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

Answer 1

在图表级别，您需要content 而不是toolTipContent。您的 toolTipContent 代码当前被忽略，因为这是仅在数据级别使用的属性。以下是您可以直接设置样式的方法，基本上按照您的要求进行设置:

toolTip: {
  fontStyle: "normal",
  cornerRadius: 14,
  backgroundColor: "RGBA(37, 41, 45, 0.9)",
  content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",
  shared: true,
}

因为您使用的是 shared: true，您的 x 值将显示两次。如果您不想要，请查看 contentFormatter function for Shared toolTip文档中的部分。