麻烦让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

在图表级别，你需要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部分。