Проблема с получением CanvasJS для раскраски только координат в подсказке - PullRequest
Новая
       16

Проблема с получением CanvasJS для раскраски только координат в подсказке

1 голос
/ 27 апреля 2019

Текст подсказки:

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>

1 Ответ

1 голос
/ 27 апреля 2019

На уровне графика вместо 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 для общего инструмента toolTip в документации.

...