麻烦获取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",

    }

  },

Answer 1

在图表级别，toolTipContent您不需要content。您的toolTipContent代码当前正在被忽略，因为这是仅在数据级别使用的属性。您可以按照以下基本要求直接设置样式：toolTip: {&nbsp; fontStyle: "normal",&nbsp; cornerRadius: 14,&nbsp; backgroundColor: "RGBA(37, 41, 45, 0.9)",&nbsp; content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",&nbsp; shared: true,}由于您正在使用shared: true，因此您的x值将显示两次。如果您不想这样做，请查看文档中“共享的工具提示”部分的contentFormatter函数。