javascript - 麻烦获取CanvasJS仅对工具提示中的坐标进行着色

工具提示文字：

10Dataseries 1: 71Dataseries 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>

最佳答案

在图表级别，您需要toolTipContent而不是content。您的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部分。